zurb-foundation - 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% 的填充（景观的缩小）。

谢谢

score 85 · Accepted Answer

2015 年11 月编辑：在 Foundation 6 中查看Typography Helpers

2014 年4 月编辑：在 Foundation 5 中查看Utility classes。

原答案：

使用文本中心类。

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

score 4 · Accepted Answer

4

尝试添加居中的类。

.five.columns.centered

于 2012-10-02T22:51:24.117 回答

score 3 · Accepted Answer

3

只需添加类“文本中心”

于 2013-05-29T20:57:01.703 回答

score 2 · Accepted Answer

使用基础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; }

score 1 · Accepted Answer

我可以让图像以 Foundation 4 为中心的唯一方法是更改为 display:block; 对于 img 而不是 display:inline-block;

5 回答 5