html - 垂直对齐在列表中不起作用

Question

我想将列表中的文本按底线对齐。我使用垂直对齐 css 选项，但它不起作用。您可以在这里找到代码：http: //jsfiddle.net/kL4AX/2/ 在此先感谢

Answer 1

您可以使用定位将<h1>元素移动到列表项的底部，就像在这个jsFiddle 示例中一样

.navigator ul li {
    display: inline-block;
    width: 100px;
    height: 400px;
    vertical-align: bottom;
    border-style:solid;
    border-width:1px;
    position:relative;
}

.navigator ul li h1 {
    margin:0;
    padding:0;
    position:absolute;
    bottom:0;
}​

Answer 2

是的，您可以尝试将 H1 定位为绝对底部，或者如果您有固定的高度，您<li>可以使用 padding-top 值来确保 H1 放置在底部。

Vertical-align 不会相对于其父元素居中或定位元素。