我试图在< div class =“row”>内的两个< div class =“span6”>在Bootstrap中,我使用任何我通常的技巧有问题,如display:inline-block;或显示:table-cell; (这是我正在工作的JSFiddle:http://jsfiddle.net/mA6Za/).
这是我试图使用的,这在Bootstrap中不起作用:
<div class="container"> <div class="row" style="display: table"> <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;"> Block 1 - Vertically center me please! </div> <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;"> Block 2- Center me too </div> </div> </diV>
可以垂直对齐这两个.span6,以使Block1和Block2的高度都不知道?我想使用Bootstrap,因为负责任的功能,但平板电脑我们希望内容垂直对齐.
解决方法
垂直居中的实际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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。