使用引导程序将 div 的内容居中答案

【问题标题】：Center the content of div with bootstrap使用引导程序将 div 的内容居中
【发布时间】：2013-04-07 12:07:56
【问题描述】：

我有这个页脚：

<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>

每个文本和图像都在 li 元素内完美居中，现在我喜欢 ul 元素位于 div 的中心，但它现在左对齐。

【问题讨论】：

.menu-footer { width: 200px; margin: 0px auto; }

标签： css twitter-bootstrap

【解决方案1】：

修复.menu-footer的宽度，并添加

margin: 0 auto;

以它的父div为中心。

【讨论】：

【解决方案2】：

居中的项目必须粉碎浮动属性，

添加这个css：

.span12 {
    width: 940px;
    margin: 0 auto;
    float: none;
}

【讨论】：

【解决方案3】：

试试：

 <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>

【讨论】：