如何在有效的 Twitter Bootstrap 中垂直居中内容？
Posted
技术标签:
【中文标题】如何在有效的 Twitter Bootstrap 中垂直居中内容？【英文标题】：How to vertically center content in Twitter Bootstrap that works? 【发布时间】：2013-04-26 11:28:48 【问题描述】：我已经阅读了以前的问题并尝试了他们的解决方案，但似乎没有一个有效。
我的示例 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>
...
描述centering类的CSS如下：
.centering
float:none;
margin:0 auto;
浏览器通过将文本span4 和span8 放在浏览器窗口的顶部而不是浏览器窗口的垂直中间来呈现此代码。我在设置时忽略了什么？
【问题讨论】：
只是一个观察但不能 div class="span4" class="centering" 变成 div class="span4 centering" ？您是否希望跨度内的内容居中？如果是这样，请尝试文本对齐：中心，不确定我是否理解这个问题？一个例子会有所帮助..see jsfiddle.net/BzYxM 【参考方案1】：我不知道这在现实世界的场景中是否对您非常实用，但无论如何值得一看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, bodyheight: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>
【讨论】：
谢谢，但是当span4 和span8 元素中都有内容时，这似乎不起作用。当 span4 或 span8 中有内容时，它似乎确实有效。
嗯，这很奇怪。如果我向这两个 div 添加内容，似乎对我有用……除非我遗漏了什么。您是在谈论很多内容吗？
只有一个 div 中的文本（一两个句子）和另一个中的图像。以上是关于如何在有效的 Twitter Bootstrap 中垂直居中内容？的主要内容，如果未能解决你的问题，请参考以下文章
如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？
在 Twitter Bootstrap 3 中使用 col-lg-push 和 col-lg-pull 进行列顺序操作