首页 文章

zurb基金会网格中心的内容

提问于
浏览 次
27

我试图将图像水平居中到zurb列，但似乎不可能 . 我尝试了一切，到处搜索，但我无法让它工作 .

这是我的代码：

<div class="row">
    <div class="twelve columns">

        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

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

谢谢

center zurb-foundation

5 回答

  • 4

    Edit November 2015: 在基金会6退房Typography Helpers

    Edit April 2014: 在基金会5中查看Utility classes .

    Original answer:

    使用文本中心类 .

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

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

    回复于
  • 81

    尝试添加居中的类 .

    .five.columns.centered
    回复于
  • 1

    只需添加“文本中心”类

    回复于
  • 3

    使用基础4：

    HTML：

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

    CSS：

    #wrap-img img { margin: 0 auto; }
    回复于
  • 2

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

    回复于

相关问题