Fatal编程技术网

Javascript 引导中垂直对齐DIV

javascript jquery css twitter-bootstrap

Javascript 引导中垂直对齐DIV,javascript,jquery,css,twitter-bootstrap,vertical-alignment,Javascript,Jquery,Css,Twitter Bootstrap,Vertical Alignment,我正在使用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

我正在使用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窗口中垂直对齐行及其项吗？尝试了许多不同的方法，但都不起作用。如果这是一个选项，我可以使用Jquery

如果这有帮助的话，最大图像的高度是418px，但我更愿意将图像设置为响应，这样高度就会改变…

这里有一把小提琴：

jquery是必需的-未正确阅读问题

 var blockTop = $('.container-liquid').height()/2 - $('.vertical-center-block').height();
 $('.vertical-center-block').css('top', blockTop);
似乎您希望根据窗口的高度调整大小。我的做法是：

css:

Html
容器液体的css是什么？你可以把它放在中间！它现在居中了吗？再次检查小提琴，它需要一个固定高度的容器液体，这排除了我为图像设置的任何响应。需要一个没有固定高度的解决方案。反正我也不能让它工作。你能准确地写下jquery命令在我的html中应该是什么样子的吗？这是目前为止最接近的解决方案，但是将我的div 75%放在窗口屏幕下方-而不是中间…我猜这是在div顶部添加额外的25%，它将div的25%推过垂直中心。这很好，只需将填充减少到15%就可以了？你将不得不玩它一点，因为我不知道你是否有导航栏或其他任何东西。此外，如果它是最接近的解决方案，请向上投票或标记为正确；） 
html, body{
 height: 100%;
 min-height: 100%;
}

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

<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>