[英]How to vertically center content in Twitter Bootstrap that works?
I have read previous questions and attempted their solutions, but none seem to work. 我已经阅读了先前的问题并尝试了解决方案,但似乎没有任何效果。
My example Bootstrap HTML is very simple: 我的示例Bootstrap HTML非常简单:
...
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4" class="centering">
span4
</div>
<div class="span8" class="centering">
span8
</div>
</div>
</div>
</body>
...
The CSS that describes the centering
class is as follows: 描述centering
类的CSS如下:
.centering {
float:none;
margin:0 auto;
}
The browsers render this code by putting the text span4
and span8
at the top of the browser window, instead of in the vertical middle of the browser window. 浏览器通过将文本span4
和span8
放在浏览器窗口的顶部,而不是放在浏览器窗口的垂直中间,来呈现此代码。 What have I overlooked in setting this up? 在设置此功能时我忽略了什么?
I don't know if this will be very practical for you in a real-world scenario, but worth a look, anyhow: 我不知道在现实情况下这对您是否非常实用,但是无论如何值得一看:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4" class="centering">
span4
</div>
<div class="span8" class="centering">
span8
</div>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.