Bootstrap 3 div定位答案

【问题标题】：Bootstrap 3 divs positioningBootstrap 3 div定位
【发布时间】：2014-08-08 13:16:00
【问题描述】：

我有一个需要构建的布局，如图所示：

灰色代表页眉，那里没有问题。至于body，我把它分成了3个div，如下：

<div class="row">
   <div class="col-lg-3">
     <p>text positioned right here</p>
   </div>
   <div class="col-lg-6">
     <a href="#"><img src="path/to/image.jpg"></a>
   </div>
   <div class="col-lg-3">
     <p>text positioned right here</p>
   </div>
</div>

我遇到的问题是我需要将文本垂直居中，但我不知道如何。我已经尝试过这个解决方案Twitter Bootstrap 3, vertically center content，但它似乎对我不起作用（也许我做错了什么）。我尝试添加 padding-top 来修复它，但它会弄乱移动显示（如预期的那样）。

请问，有人可以帮忙吗？

谢谢。

【问题讨论】：

请看这里stackoverflow.com/questions/10088706/…。
stackoverflow.com/questions/10009514/…

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

文本对齐属性仅用于水平文本对齐，如果要使文本垂直对齐需要使用位置属性，我们可以使用文本对齐类似的东西。例如：使用屏幕属性的中心。

position:relative;
left:50%; top:50%;

还减去容器的边距属性。

【讨论】：

【解决方案2】：

垂直居中的最简单方法是将display:table 添加到包含元素，并将display:table-cell 添加到要居中的元素。 Bootstrap 有一个 .text-center 类来处理水平居中。

http://www.bootply.com/lTigluKakK

使用您的示例作为模板：

  <div class="col-xs-3 text-center v-align-container">
     <p class="v-align-content">text positioned right here</p>
   </div>
   <div class="col-xs-6 text-center">
     <a href="#"><img src="//placehold.it/400x400"></a>
   </div>
  <div class="col-xs-3 text-center v-align-container">
     <p class="v-align-content">text positioned right here</p>
   </div>

CSS：

.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}

如果您能够定义侧边栏 div 的高度，这将非常有用。但是，如果您需要它们动态地 匹配中心元素的高度，则需要更多的引导魔法来将它们联系在一起，但这仍然适用于在这些侧边栏中居中内容。

【讨论】：