Question

我正在使用Bootstrap 3并需要将div垂直对齐到浏览器窗口的中心（包括调整大小）。

我目前的代码就是这个......

<div class="container-liquid">
  <div class="row">
    <div class="col-md-4"> <img src="img/video-camera.png" alt=""></div>
    <div class="col-md-4"><img src="img/tablet.png" alt=""></div>
    <div class="col-md-4"><img src="img/phone.png" alt="" > </div>
  </div>
</div>

知道如何在broswers窗口中垂直对齐ROW及其项目吗？尝试了许多不同的方法但没有工作。如果这是一个选项，我可以使用Jquery。

最大图像的高度是418像素，如果这有帮助，但我宁愿将图像设置为响应，所以高度会改变......

Answer 1

好像你想把它放在窗口的高度上来调整大小。我的方法是：

的CSS：

html, body{
 height: 100%;
 min-height: 100%;
}

.container-liquid{
  height: 50%;
  padding: 25% 0%;
}

HTML

<html>
<body>
<div class="container-liquid">
  <div class="row">
    <div class="col-md-4"> <img src="img/video-camera.png" alt=""></div>
    <div class="col-md-4"><img src="img/tablet.png" alt=""></div>
    <div class="col-md-4"><img src="img/phone.png" alt="" > </div>
  </div>
</div>
</body>

</html>

Answer 2

这是一个小提琴：http://jsfiddle.net/boatrokr/3bH45/1/

需要jquery - 没有正确阅读问题

 var blockTop = $('.container-liquid').height()/2 - $('.vertical-center-block').height();
 $('.vertical-center-block').css('top', blockTop);

在Bootstrap中垂直对齐DIV

2 个答案: