在Bootstrap中垂直对齐DIV
[英]vertically align DIV in Bootstrap
问题描述
I am using Bootstrap 3 and need to vertically align a div to the center of the browser window (including on resize). 
我正在使用Bootstrap 3，需要将div垂直对齐到浏览器窗口的中心（包括调整大小）。
My current code is this... 我当前的代码是这个...
<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>
Any idea how I can vertically align the ROW and its items within a broswers window? 知道如何在浏览器窗口中垂直对齐ROW及其项吗？ Tried many different approaches but none work. 尝试了许多不同的方法，但是都没有用。 I can use Jquery if that is an option. 如果可以的话，我可以使用Jquery。
The height of the largest image is 418px if that helps, but I'd rather set the images to be responsive so the height would change... 如果有帮助，最大图像的高度为418像素，但我宁愿将图像设置为响应式，以便高度可以改变...
2 个解决方案
解决方案1
1 已采纳 2014-06-29 17:03:19
Seems like you want to base it on the height of the window for resize. 似乎您想将其基于窗口的高度进行调整。 My approach is to: 我的方法是：
css: CSS：
html, body{
height: 100%;
min-height: 100%;
}
.container-liquid{
height: 50%;
padding: 25% 0%;
}
Html 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>
解决方案2
0 2014-06-29 16:37:34
here's a fiddle: http://jsfiddle.net/boatrokr/3bH45/1/ 这是一个小提琴： http : //jsfiddle.net/boatrokr/3bH45/1/
jquery is required - didn't read the question properly jQuery是必需的-未正确阅读问题
var blockTop = $('.container-liquid').height()/2 - $('.vertical-center-block').height();
$('.vertical-center-block').css('top', blockTop);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.