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设置为36px高，我希望将div内部垂直居中。为实现这一点，我使用了margin: auto 0;。但它并不集中。

有任何线索吗？

Answer 1

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

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

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

Answer 2

试试这个：

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

Answer 3

您需要使行高与li高度相同。

身高：36px; line-height：36px;

我看到你有填充，这可能会改变你看到div的方式。使用Chrome Developer Console或firebug之类的内容来查看CSS的应用方式。

将一个div放在里面

3 个答案: