垂直对齐 DIV 内底部 UL

Question

我有一个高度为40px的div，和一个行高为28px的ul。我想将ul放置在div内部的底部。我试过使用vertical-align:bottom;，但是没有起作用。

我的另一个想法是使用顶部margin，但如果可以使用vertical-align，我会选择那个方法。

我的演示：http://jsfiddle.net/YpEd7/

- user1452062

---

这会不起作用吗？http://jsfiddle.net/25VV5/1/ - Prashank

margin:12px 0 0 0; 这样写不行吗？ - Aravona

Answer 1

在容器中添加行高。一旦您在容器上设置了40像素的行高，垂直对齐底部将与底部对齐，因为您的容器也是40像素高。之前它不起作用是因为容器的行高小于40像素，所以ul会对齐到默认行高的底部。

http://jsfiddle.net/YpEd7/2/

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

- Huangism

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/

- Prashank

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

- G-Cyrillus

---

为什么ul需要line-height:1em？ - Suresh Ponnukalai

请注意，vertical-align 的默认值是基线（baseline），因此如果您将其删除，则 li 元素将位于 40 像素高度的中间。 - G-Cyrillus

@SureshPonnukalai 重置 li 元素内部的行高，否则它将保持为 40 像素 :) - G-Cyrillus

我刚刚把那个拿出来测试了一下。运行良好。 - Suresh Ponnukalai

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/

- Justin Drury

---

vertical-align + line-height适用于文本和内联框，它们的工作非常好，就是用来将元素从其基线移动到文本或其他内联框之间。如果CSS中没有设置高度，则还会为元素设置最小高度。您可以使用此http://codepen.io/gc-nomade/pen/rmxpo来查找与元素和基线/行高之间的交互;) - G-Cyrillus

行高绝对不是为了对齐元素而设计的。它的设计目的是提供更改行框元素（如“p”）之间间距的能力，例如将文本块设置为双倍行距。您可以通过在线查看Mozilla或W3的规范来确认这一点。 - Justin Drury

这里讲的是在底部设置一个内联盒子。...... 这里我们有一个元素和一行/内联盒子。...... 无论您是否设置行高，高元素都会将其拉伸。这就是您的伪元素所做的工作，将行高拉伸到40px，但仅限于它所在的行。http://jsfiddle.net/YpEd7/4/ 我的回答没有使用伪元素，因为您没有使用，而我在另一个问题中被称为“伪元素大师”（我使用得太多了吗？ :)）。我认为提醒一下行高的工作原理及其涉及的内容很有用。 - G-Cyrillus