Question

我有div height:40px;和ul line-height:28px;。我想将ul放在div的底部。我试过了vertical-align:bottom;，但它没有帮助。

我的另一个想法是上边距，但如果垂直对齐可能，我会选择它。

Answer 1

为容器添加行高。一旦容器上的线高度为40px，垂直对齐底部将使其与底部对齐，因为您的容器也是40px高。之前没有工作，因为容器的行高小于40px所以ul确实与默认行高的底部对齐

#container {
    background:gray;
    height:40px;
    line-height: 40px;
}

Answer 2

我在上面发表的评论^

#container {
    background:gray;
    height:40px;
    position: relative;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 0px;
}

http://jsfiddle.net/25VV5/2/

Answer 3

您需要将vertical-align与line-height混合才能实现此目的： DEMO

#container {
    background:gray;
    height:40px;
    line-height:40px;/* equal to height of container */
}

ul {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:bottom;/* fine since i'm inline-block */
    display:inline-block;
    line-height:1em;
}

ul li {
    line-height:28px;
    background:red;
    color:#fff;
    margin:0 20px 0 0;
    float:left;
}

Answer 4

请停止使用行高hack进行垂直对齐。垂直对齐仅在有要引用的兄弟时才有效。

如果您只想要一个要垂直对齐的元素，则必须首先将其包装在具有已定义高度的元素中（可以是％）。然后将以下类放在容器元素上。

CSS

.VAlignHelper:after {
    content:'';
    font-size:0;
    height:100%;
    vertical-align:middle;
    display:inline-block;
}

HTML

<div id="container" class="VAlignHelper">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>

演示

http://jsfiddle.net/jmdrury/YpEd7/3/

在DIV内垂直对齐底部UL

4 个答案:

CSS

HTML

演示