小块网格未正确居中拇指

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>

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

链接在这里 关联

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

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>

.