小块网格未正确居中拇指答案

【问题标题】：small block grid not centering thumbs properly小块网格未正确居中拇指
【发布时间】：2014-02-27 17:56:30
【问题描述】：

我有 3 个大拇指想要连续居中。代码是

    <div class="large-12 columns">
    <ul class="small-block-grid-3">
      <li><img class="shadow" src="img/thumbs/carWashHome.jpg"></li>
      <li><img   class="shadow" src="img/thumbs/homeCleanHome.jpg"></li>
      <li><img   class="shadow" src="img/thumbs/carpetCleanHome.jpg"></li>
    </ul>
  </div>

但不知何故，拇指是从左边开始的，而不是在中间。你能建议如何解决这个问题。这是图片

这里是链接LINK

您可以看到拇指向左浮动。如何使它们居中。谢谢。

【问题讨论】：

small-block-grid-3 将向左浮动并为每个 li 分配 33.3333% 的宽度。它在元素上设置填充，使它们看起来均匀分布。如果不查看更多代码，很难判断是否存在任何冲突样式。
你的意思是我应该给列表项填充对吗？
可以提供demo或者网址吗？
webcheck.co.in/tulisa

标签： css zurb-foundation

【解决方案1】：

将一行替换为以下内容

<div class="large-12 columns" style="text-align: center;">

关键是添加style="text-align: center;"，问题将得到解决

【讨论】：

谢谢。有效。但是Aditya，你能告诉我这种风格是什么意思吗？

【解决方案2】：

感谢您发布网址。

只需在您的.small-block-grid-3 > li{} 中添加text-align:center;

如果您有任何疑虑，请告诉我。

CSS

.small-block-grid-3 > li{
    text-align:center;
}

【讨论】：

【解决方案3】：

将此CSS添加到您的图像标签中：

display: block;
margin-left: auto;
margin-right: auto;

它将图像与li标签中的center对齐。

【讨论】：

【解决方案4】：

可能很高兴知道，该基金会还有一个名为“text-center”的 CSS 类，可以根据需要应用于元素:-)

<div class="text-center">
content goes here...
</div>

【讨论】：