html - 什么 CSS 负责将此页面中的 div 'columns twelve' 居中对齐

Question

如果我们查看页面 http://www.groupon.co.uk/deals/edinburgh/white-apple-2-6/55361548有一个带有 CSS 类 columns 和 twelve 的 div 元素。在我看来，这个类以某种方式负责居中对齐的容器——它的左右边距相等。

我已经尝试研究此页面上的 CSS 一段时间，以确定哪一段 CSS 负责页面主要内容的居中放置，但我找不到是什么让这个 div 居中放置。

有人可以为我突出显示分配给此页面上第 12 列类的 CSS，在 div 的左侧和右侧以白色间距为中心吗？谢谢!

Answer 1

居中的位是 .row 容器:

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

.row 的 CSS 使其内容居中(.columns 十二 div)是:

margin: 0 auto;
width: 960px;

通过给 .row 一个定义的 width，并将左右 margin 设置为 auto，浏览器会自动将其居中。然后将内容 div .columns two 设置为 100% width(更具体地说，twelve 类正在设置 width 到 100%) 使内容扩展以填充 .row 的 960px。