Html 垂直对齐底部UL内分区

我有一个高度为40px的

div

和

ul

的

线高：28px。我想把ul放在底部，在div里面。我尝试了
垂直对齐：底部，但它没有帮助

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

我的演示：
为了实现这一点，您需要混合垂直对齐到线条高度：

#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;
}

将行高度添加到容器中。一旦容器上的线条高度为40px，垂直对齐底部将使其与底部对齐，因为容器也是40px高。它以前不工作，因为容器的线高度小于40px，所以ul与默认线高度的底部对齐


我在上面的评论中也发表了同样的评论^

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

请停止为垂直对齐而持续使用线高度调整。垂直对齐仅在有同级参照时有效

如果只有一个要垂直对齐的图元，则必须首先将其包裹在具有定义高度（可以为%）的图元中。然后将以下类放置到容器元素上

CSS
HTML


菜单1
菜单2
菜单3


演示
这不起作用？
边距：12px 0
这是否也适用？为什么ul需要行高：1em？请注意，垂直对齐的defaut值是基线，因此如果删除它，您的li将位于40px的中间height@SureshPonnukalai要重置li-else内部的线高度，它也是40px:）我刚刚取出并测试了它。工作正常。文本和内联框的垂直对齐+行高工作正常，这就是它的用途，将元素从其“基线”移动到文本或其他内联框中。如果CSS中未设置最小高度，它也会为元素设置最小高度。您可以使用它来了解与元素的交互以及基线/线高度；）线条高度绝对不是为对齐元素而设计的。它旨在提供更改线框元素（如“p”）之间间距的功能。例如，使文本块的间距加倍。您可以通过在线查看Mozilla或W3上的规范来确认这一点。这就是这里的内容，在底部设置一个内联框。。。。。。。这里我们有一个元素和一个行/内联框。。。。。无论是否设置了线高度，tall元素都会拉伸它。这就是伪元素正在做的事情，将线的高度拉伸到40px，但仅在它将站立的线上。我的回答没有使用pseudo，因为您使用了它&因为我在另一个问题中被称为pseudo元素的大师（我使用它们太多了吗？：）。我想提醒一下线高度是如何工作的以及它涉及到什么是有用的。
#container {
    background:gray;
    height:40px;
    position: relative;
}
ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 0px;
}

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

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