vertical-align インラインボックス要素にしても指定されない

Question

###解決したいこと
vertical-alignのプロパティでインライン要素をインラインブロック要素に指定しても反映されません。
クローム、サファリ、ファイヤーフォックスのブラウザで表示しても反映されませんでした。
なぜインラインブロック要素にしても使用できないかわかりますか？

###htmlコード
<div class="test">
 <a class="test1">テスト</a>
 <a class="test2">テスト２</a>
 <a class="test3">テスト３</a>
</div>

###cssコード
.test{
background-color:gray;
}

.test1{
vertical-align:bottom;
height:300px;
display:inline-block;
}

.test2{
vertical-align:middle;
height:300px;
display:inline-block;
}

.test3{
vertical-align:top;
height:300px;
display:inline-block;
}

###補足
table要素にした時にはきちんと反映されます。

Comments

[kei344]

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

.test1〜.test3のそれぞれに背景色をつけてみれば、
今どんな状態になっているのかわかります。

inline-blockにしたボックスに対してvertical-alignを指定する場合、
ボックスそのものを整列させるのであり、ボックスの中身のテキストの上下位置を指定するのではない
ということを理解する必要があります。
これは、.test1〜.test3のそれぞれのheightを異なるサイズにしてみればわかります。

横並びにしたボックスの高さをすべて揃えておき、その中のテキストを上下中央に配置したいのであれば、
display:table-cellにvertical-align:middleを指定した方が早いですね。

Comments

[kotori_00]

回答ありがとうございます。
とてもわかりやすかったです。解決できました。