質問: ### 解決したいこと vertical-alignのプロパティでインライン要素をインラインブロック要素に指定しても反映されません。 クローム、サファリ、ファイヤーフォックスのブラウザで表示しても反映されませんでした。 なぜインラインブロック要素にしても使用できないかわかりますか? ``` ###htmlコード テスト テスト2 テスト3 ``` ``` ###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要素にした時にはきちんと反映されます。
回答: .test1〜.test3のそれぞれに背景色をつけてみれば、 今どんな状態になっているのかわかります。 `inline-block`にしたボックスに対して`vertical-align`を指定する場合、 **ボックスそのものを整列させるのであり、ボックスの中身のテキストの上下位置を指定するのではない** ということを理解する必要があります。 これは、.test1〜.test3のそれぞれのheightを異なるサイズにしてみればわかります。 横並びにしたボックスの高さをすべて揃えておき、その中のテキストを上下中央に配置したいのであれば、 `display:table-cell`に`vertical-align:middle`を指定した方が早いですね。