twitter-bootstrap 使用引导程序将 div 的内容居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16014131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center the content of div with bootstrap
提问by SIFE
I have this footer:
我有这个页脚：
<div id="footer" class="navbar-bottom">
<div class="navbar-inner">
<div class="row">
<div class="span12" style="text-align: center;">
<ul class="menu-footer">
<li><a href="#"><img src="images/fportfolio.png"><p class="merg-top">Portfolio</p></a></li>
<li><a href="#"><img class="center" src="images/fabout.png"><p class="merg-top">About</p></a></li>
<li><img width="160px" src="images/logo.png"></li>
<li><a href="#"><img src="images/fclients.png"><p class="merg-top">Clients</p></a></li>
<li><a href="#"><img src="images/fcontact.png"><p class="merg-top">Contact</p></a></li>
</ul>
</div>
</div>
</div>
</div>
Each text and image are centered perfectly inside the lielement, now I like the ulelement reside in center of the div, but its now aligned to left.
每个文本和图像都在li元素内部完美居中，现在我喜欢ul元素位于 div 的中心，但它现在向左对齐。
回答by Bigood
Fix the width of your .menu-footer, and add
固定您的宽度.menu-footer，并添加
margin: 0 auto;
to center it on its parent div.
以它的 parent 为中心div。
回答by hafid2com
centered an item must crush the float property,
居中的项目必须粉碎浮动属性，
Add this css:
添加这个css：
.span12 {
width: 940px;
margin: 0 auto;
float: none;
}
回答by zoops
Try:
尝试：
<div class="span12 text-center">
<ul class="menu-footer">
<li><a href="#"><img src="images/fportfolio.png"><p class="merg-top">Portfolio</p></a></li>
<li><a href="#"><img class="center" src="images/fabout.png"><p class="merg-top">About</p></a></li>
<li><img width="160px" src="images/logo.png"></li>
<li><a href="#"><img src="images/fclients.png"><p class="merg-top">Clients</p></a></li>
<li><a href="#"><img src="images/fcontact.png"><p class="merg-top">Contact</p></a></li>
</ul>
</div>
