html - 要素の垂直整列が機能しない

Question

私が達成しようとしているのは、内部にリンクを持つ一連の要素 (ボックス) です。このリンクは右下にあるはずですが、vertical-align プロパティが機能していません

それはどのようなものか

HTML

<ul>
    <li><a href="#">TEST 1</a></li>
    <li><a href="#">TEST 2</a></li>
    <li><a href="#">TEST 3</a></li>
    <li><a href="#">TEST 4</a></li>
    <li><a href="#">TEST 5</a></li>
    <li><a href="#">TEST 6</a></li>
    <li><a href="#">TEST 7</a></li>
</ul>

CSS

ul li
{
    display: inline-table;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    vertical-align: bottom;
    display: block;
    height: 100%;
    padding: 10px;
}

また、 - 要素の周りにラッパーを使用して、垂直方向の位置合わせと絶対配置のいくつかの組み合わせも試しましたがa、まだ努力はしていません。

質問

a-要素を正方形全体に拡張しながら、リンクを右下に配置するにはどうすればよいですか?

score 1 · Accepted Answer

テキストをスパン内に配置し、そのスパンを a 内に絶対配置します。これにより、右下に簡単に設定できます。

CSS は次のようになります。

ul li {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a {
    display: block;
    height: 100%;
    position: relative;
}
ul li a span {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

例: http://jsfiddle.net/E2kfd/

score 1 · Accepted Answer

Vertical-align は table-cell でのみ機能します:

ul li a {
text-align: right;
vertical-align: bottom;
display: table-cell;
height: 100%;
padding: 10px;
}

JSFiddle: http://jsfiddle.net/4JMav/8/

score 1 · Accepted Answer

ポジショニングを使用した 1 つの方法を次に示します。

ul li
{
    display: inline-table;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
}
ul li a
{
    text-align: right;
    display: inline-block;
    padding: 10px;
    position: absolute;
    bottom: 0; right: 0;
}

ただし、個人的には、uldisplay: inline-tableを指定しtable-cellて、li を指定することをお勧めします。

jsfiddle

score 1 · Accepted Answer

次の変更が必要です。

ul li a
{
    ...
    display: table-cell;
    ...
}

(デモ: http://jsfiddle.net/4JMav/6/ )

垂直方向の配置は、表のセルとそれ以外では異なる働きをします。最初はコンテンツを整列し、もう 1 つは行ボックス内の要素のテキストコンテンツを整列します。ブロックを (インライン) テーブルに配置すると、CSS レンダラーは、デフォルトの垂直方向の配置で無名のテーブルセルを生成し、その中にブロックを配置します。ただし、内側の要素自体を表のセルに変換すると、設定した垂直方向の配置が適用されます。

html - 要素の垂直整列が機能しない

4 に答える 4

Related

Reference