vertical-alignは主にインラインボックス内で画像の高さを文字の高さに合わせたり、
テーブル内の文字の位置を調整するために使われる。
テーブルのサンプルコード
HTML
|
1 2 3 4 5 6 7 8 |
<table border="1"> <tr> <td class="baseline">baseline</td> <td class="top">top</td> <td class="middle">middle</td> <td class="bottom">bottom</td> </tr> </table> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
tr { height: 100px; } tr .baseline { vertical-align: baseline; } tr .top { vertical-align: top; } tr .middle { vertical-align: middle; } tr .bottom { vertical-align: bottom; } |