zurb 基础中心在网格中的内容

Posted 2023-03-05

【中文标题】zurb 基础中心在网格中的内容

【英文标题】：zurb foundation center content in the grid

【发布时间】：2012-08-18 05:25:58

【问题描述】：

我正在尝试将图像水平居中放置到 zurb 列中，但这似乎是不可能的。我尝试了一切，到处搜索，但我无法让它工作。

这是我的代码：

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

目前横向图像在 12 列网格上还可以，但当出现纵向图像时，它位于网格的左侧。如果我给它一个 25% 的填充它会到中心，但是我使用 php 从一个文件夹中提取所有图像并动态生成代码，所以我不能在所有图像上都有 25% 的填充（横向的缩小）。

谢谢

【参考方案1】：

尝试添加居中的类。

.five.columns.centered

【讨论】：

我看不到类定义。我错过了什么吗？

这行不通！这以网格元素为中心，而不是内容本身 - 在此处阅读 foundation.zurb.com/docs/grid.php

【参考方案2】：

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" >
    </div>
</div>

来源：https://github.com/zurb/foundation/pull/224

【讨论】：

这个答案是最好的，因为它使用现有的 css 样式。创建一个新类只会增加臃肿、笨拙、meh 和填充物。然后这个问题浮现在我脑海中，关于这个“文本中心”类的文档在哪里。也许我只是错过了它？

+1 这是最好的答案，因为 OP 询问了基础，并且该解决方案使用了内置的基础类。

我不确定这之前是否可用。无论如何，我已经接受了这个作为正确答案。

只有我一个对这些实用程序类皱眉吗？添加style="text-align: center" 有什么区别？

@sroes 没有区别。如果您暗示这不是语义，那么您是正确的。但话说回来，大多数响应式框架也不是。

【参考方案3】：

使用基础 4：

html：

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

CSS：

#wrap-img img  margin: 0 auto; 

【参考方案4】：

在 Foundation 4 中获得图像居中的唯一方法是更改​​为 display:block;对于 img 而不是 display:inline-block;

【参考方案5】：

只需添加“文本中心”类