html - リスト内で垂直整列が機能しない

Question

リスト内のテキストを一番下の行に揃えたい。vertical-align css オプションを使用していますが、機能しません。ここでコードを見つけることができます: http://jsfiddle.net/kL4AX/2/ 前もって感謝します

Answer 1

このjsFiddleの例<h1>のように、配置を使用して要素をリスト項目の一番下に移動できます

.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 は、親に対して要素を中央揃えまたは配置しません。