小块网格没有正确对中拇指

Question

我有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

您可以看到拇指向左浮动。 如何集中他们。 感谢。

Answer 1

用以下

替换一行

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

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

Answer 2

感谢您发布网址。

只需在text-align:center;

中添加.small-block-grid-3 > li{}即可

如果您有疑虑，请与我们联系。

<强> CSS

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

Answer 3

将此css添加到您的图片代码：

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

它会将图片与center标记中的li对齐。

Answer 4

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

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