html - Bootstrap 3 div定位

Question

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

灰色代表header，那里没有问题。至于正文，我将其分成 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

Text align 属性只针对水平文本对齐，如果你想让文本垂直对齐你需要使用 position 属性，我们可以使用 text align 之类的东西。例如:使用屏幕中心属性。

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

还减去了容器的边距属性。