在引导程序中垂直对齐DIV

我使用引导程序3并需要将div垂直对齐到浏览器窗口的中心（包括调整大小）。在引导程序中垂直对齐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是否有帮助，但我宁愿设置图片为响应这样的高度会改变......

来源

2014-06-29 lowercase

什么的'.container-liquid'的CSS？你可以中心！ –

好像你想要基于它的窗口的高度调整大小。我的做法是：

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>

来源

2014-06-29 17:03:19

这是迄今为止最接近的解决方案，但将我的div放在窗口屏幕下方75％ - 不是中心...我猜测它将额外的25％添加到div的顶部，将其推动垂直中心的25％。 – lowercase

这很好，只是减少填充到15％？你将不得不一直玩弄它，因为我不确定你是否有导航栏或其他任何东西。此外，如果它是最接近的解决方案，upvote或标记正确;） –

耶15％的伎俩。谢谢你的帮助！ – lowercase

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

jQuery是要求 - 没有正确读取问题

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

来源

2014-06-29 16:37:34

现在居中吗？再次检查小提琴 –

@AminJafari阅读错误 - 解决它 –

需要一个固定的高度.container液体排除任何我已经设置的图像响应。需要一个没有固定高度的解决方案。无论如何，我也无法让它工作。你能写出jquery命令究竟应该如何进入我的html，所以我测试吗？ – lowercase

在引导程序中垂直对齐DIV

回答

相关问题