html – 在Bootstrap内垂直居中两个

概述编辑：只是想澄清这些跨度有不明高度(因为响应)！ 我试图在< div class =“row”>内的两个< div class =“span6”>在Bootstrap中,我使用任何我通常的技巧有问题,如display：inline-block;或显示：table-cell; (这是我正在工作的JSFiddle：http://jsfiddle.net/mA6Za/). 这是我试图使用的,这在Boot 编辑：只是想澄清这些跨度有不明高度(因为响应)！

我试图在< div class =“row”>内的两个< div class =“span6”>在bootstrap中,我使用任何我通常的技巧有问题,如display：inline-block;或显示：table-cell; (这是我正在工作的Jsfiddle：http://jsfiddle.net/mA6Za/).

这是我试图使用的,这在bootstrap中不起作用：

<div >    <div  >        <div  >            Block 1 - Vertically center me please!        </div>        <div  >            Block 2- Center me too        </div>    </div></div>

可以垂直对齐这两个.span6,以使Block1和Block2的高度都不知道？我想使用bootstrap,因为负责任的功能,但平板电脑我们希望内容垂直对齐.

解决方法 如果您想要将div的内容垂直居中或实际的div自身,我不认为你很清楚.无论如何,这两个选项都有解决方案：

垂直居中的实际div

首先是垂直对齐div的解决方案：jsFiddle

它的工作原理是设置display：table; on .container和display：table-cell;在.row.一旦完成,你可以设置vertical-align：mIDdle;在.row上垂直居中的内容.

我也不得不手动强制.row的宽度为960px,这不是很敏感(你可以使用media queries修复),但是在设置之后bootstrap设置的.px的边距左边不起作用显示：table-cell;在.row.不强制添加这些额外的20px将导致第二个div结束在第一个div以下,因为它们不会同时在同一行上合并.我设置了一些高度：100％;在所有元素上进行演示.

CSS

.container {    margin-top: 10px;    display: table;    height: 100%;}.row {    min-wIDth: 960px;    display: table-cell;    height: 100%;    vertical-align:mIDdle;}

垂直居中的div的内容

如果要垂直居中的div的内容,可以通过设置display：table来做到这一点.在.row和设置显示：table-cell; on .span6.你也需要摆脱float：left;通过将其设置为float：无.span6.

这是一个演示此选项的小提琴：jsFiddle

总结

以上是内存溢出为你收集整理的html – 在Bootstrap内垂直居中两个全部内容，希望文章能够帮你解决html – 在Bootstrap内垂直居中两个所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。