Bootstrap 3 divs定位

Question

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

格雷代表标题，那里没有问题。至于身体，我把它分成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来修复它，但它弄乱了移动显示屏（正如预期的那样）。

拜托，有人可以帮忙吗？

谢谢。

Answer 1

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

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

也减去容器的边缘属性。

Answer 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的高度，这非常有用。但是，如果你需要它们来匹配中心元素动态的高度，你需要更多的引导魔法将它们绑在一起，但这仍然适用于将内容集中在那些内容中侧边栏。