Question

由于某些原因，这个Bootstrap示例中的项目中心似乎不像通常使用表格/ table-cell方法那样使用CSS：

<div class="parent" style="display:table">  
  <div class="child" style="display:table-cell; vertical-align:middle>
    <h1>This is the lockup to be centered</h1>
  </div>
</div>

我正在研究的Bootstrap版本如下：

<div class="container">
        <section class="hero--section col-lg-12">
          <div class="col-lg-6 col-lg-offset-3 text-center hero--content">
            <h1>Bore'em Ipsum</h1>
            <p class="lead">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis totam numquam id quidem eligendi temporibus ullam cupiditate, assumenda, qui eaque deserunt libero, vitae sed expedita dolores laborum iusto accusamus facere.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quam eveniet dolorem sapiente reiciendis dolorum sit nam debitis odio optio, dignissimos, dolor nulla rerum earum aliquid molestias! Culpa, odit, quo!</p>
            <p><a class="" href="#"><img src="//placehold.it/20x20" alt=""></a></p>
          </div>
        </section>
      </div>

使用以下CSS：

.container {
  background:lavender;
  display:block;
}

.hero--section {
  display:table;
    height:535px;
}

.hero--content {
  display:table-cell;
  vertical-align: middle;
}

此处的问题示例： http://codepen.io/pdnellius/pen/bEPXyG

任何人都知道我在这里缺少什么？这是我垂直居中的转到方法。我知道我可能会用transform来解决这个问题。但我想知道为什么这不起作用的“原因”。有什么东西被覆盖了吗？

Answer 1

Bootstrap浮动你的表格和表格单元格元素float: left。

将此添加到您的CSS：

.hero--content {
    display: table-cell;
    vertical-align: middle;
    text-align: justify;
    float: none; /* NEW */
}

如果浮动对您的布局至关重要，那么尝试另一个居中解决方案。这是一个灵活的选择：

.hero--section {
    display: flex;
    height: 535px;
}

.hero--content {
    margin: auto; 
 }

Revised Codepen

在flex formatting context中，忽略了浮点数。

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多浏览器兼容性详细信息。

使用Bootstrap进行垂直居中

1 个答案: