将 div 居中放置在 li 中

Question

我有以下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 设置为36像素高，我想要垂直居中其中的 div。为了实现这一点，我使用了 margin: auto 0;。但它并没有居中。

有什么线索吗？

- VansFannel

---

垂直居中有点棘手，可以看一下这个网址：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html。 - JackWink

Answer 1

移除该div并使用行高来使文本垂直居中。

将行高设置为

元素的高度，即可使其垂直居中。

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

- Jared

Answer 2

试试这个：

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

- Tetaxa

---

谢谢您的回答，但我得到了相同的结果。 - VansFannel

也许尝试将div更改为像span这样的内联元素。 - Ishmael

Answer 3

您需要将行高与li高度保持一致。

高度：36像素; 行高：36像素;

我看到您有填充，这可能会改变您查看div的方式。使用像Chrome开发者控制台或Firebug这样的工具来查看您的CSS如何应用。

- Martin Samson