将 div 居中在 li 内答案

【问题标题】：Centering a div inside a li将 div 居中在 li 内
【发布时间】：2011-10-26 23:31:59
【问题描述】：

我有以下 HTML：

<ul id="downmenu">
    <li class="copyright">
        <div>&copy; 2011. All rights reserved.</div>
    </li>
    <li class="twitter">
        <img src="images/twitter.png" alt="" />
    </li>
    <li class="facebook">
        <img src="images/facebook.png" alt="" />
    </li>
</ul>

还有以下 CSS：

#downmenu {
    font-size:14px;
    border-top: 1px solid #666;
    clear: both;
    list-style-type: none;
    margin: 20px 0;
    overflow: hidden;
    padding: 11px 0 11px 34px;
    width: 870px;   
}

#downmenu li {
    float:left;
}

#downmenu li.copyright {
    margin-right:540px;
    height:36px;
}

#downmenu li.copyright div{
    margin: auto 0;
}

（我认为）#downmenu li.copyright 设置为 36px 高，我想将其中的div 垂直居中。为了实现这一点，我使用了margin: auto 0;。但它没有居中。

有什么线索吗？

【问题讨论】：

垂直居中有点棘手，看看这个：jakpsatweb.cz/css/css-vertical-center-solution.html

标签： html css vertical-alignment

【解决方案1】：

完全删除 div 并使用 line-height 使文本居中。

将行高设置为等于li 的高度将使其垂直居中。

    #downmenu li.copyright {
    margin-right:540px;
    height:36px;
    line-height:36px;
}

【讨论】：

【解决方案2】：

试试这个：

#downmenu li.copyright {
    margin-right:540px;
    height:36px;
    display: table-cell;
    vertical-align: middle;
}

【讨论】：

感谢您的回答，但我也一样。
也许可以尝试将 div 更改为像 span 这样的内联元素。

【解决方案3】：

您需要让 line-height 与 li 高度相同。

高度：36px；行高：36px；

我看到你有填充，这可能会改变你对 div 的看法。使用 Chrome 开发者控制台或 firebug 之类的工具来查看您的 CSS 是如何应用的。

【讨论】：