vertically align DIV in Bootstrap
Question
I am using Bootstrap 3 and need to vertically align a div to the center of the browser window (including on resize).
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? Tried many different approaches but none work. I can use Jquery if that is an option.
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...
2 answers
solution1
1 ACCPTED 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:
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>
solution2
0 2014-06-29 16:37:34
here's a fiddle: http://jsfiddle.net/boatrokr/3bH45/1/
jquery is required - didn't read the question properly
var blockTop = $('.container-liquid').height()/2 - $('.vertical-center-block').height();
$('.vertical-center-block').css('top', blockTop);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.