zurb基金会网格中心的内容

Question

我试图将图像水平居中到zurb列，但似乎不可能。我尝试了所有的东西，到处搜索，但我无法让它工作。

这是我的代码：

<div class="row">
    <div class="twelve columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

当前风景图像在12列网格上没有问题，但是当出现肖像图像时，它位于网格的左侧。如果我给它一个25％的填充它去中心，但我使用PHP从文件夹中提取所有图像并动态生成代码，所以我不能在所有图像上有25％的填充（景观缩小）。

由于

Answer 1

尝试添加居中的课程。

.five.columns.centered

Answer 2

只需添加“text-center”类

即可

Answer 3

使用基础4：

HTML：

<div class="row">
    <div id="wrap-img" class="large-12 columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

CSS：

#wrap-img img { margin: 0 auto; }

Answer 4

我能在基础4中居中的唯一方法是更改​​为display：block; for img而不是display：inline-block;