流体布局中像素大小元素的精确中心 Twitter Bootstrap

【问题标题】：Exact center of a pixel-sized element in fluid layout Twitter Bootstrap流体布局中像素大小元素的精确中心 Twitter Bootstrap
【发布时间】：2012-05-28 04:24:35
【问题描述】：

我对流体设计还是比较陌生，所以希望我在经过一番摸索后不会错过这里显而易见的东西......

如何让 512x512 div 元素在容器流畅的 Twitter Bootstrap 布局中水平居中。（顶部有可根据屏幕大小调整的流体元素。）

【问题讨论】：

标签： css twitter-bootstrap fluid-layout

【解决方案1】：

创建一个fluid-row 容器来包裹居中的元素。这将在您的 container-fluid 内的某个位置应用自动左右边距和 512px 的固定宽度为您的 div。

HTML：

  <div class="row-fluid">
    <div class="span12">
      <div class="centered512px">
         <h2>512 px Centered DIV</h2>
         <p>Donec id elit non mi porta gravida at eget metus.</p>
      </div>
    </div>
  </div>

CSS：

.centered512px {
    width: 512px;
    margin: 10px auto;
    background-color: red;
}

【讨论】：