vertical-alignの使い方【css tips】[to-R]

vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v

[aroma_black]

"vertical-alignがボックスレベル要素ではなく、テーブルセルの縦方向の揃え位置を指定するプロパティ"

[kitokitoki]

vertical-align:middle, height, line-height で縦方向の中央

[seapig_dolphin]

vertical-align:middle

[shigihara55]

line-heightを設定すればいけるらしい。

[AmaiSaeta]

vertical-alignはdisplay:table-cellな要素に適用される。

[egg-rice]

ボックス内のテキストを縦方向（垂直方向）で中央に配置する方法を紹介している。

[isdyy]

vertical-alignとdisplay:table-cell

[kurobuchi]

「vertical-alignがボックスレベル要素ではなく、テーブルセルの縦方向の揃え位置を指定するプロパティ」ちゃんと理解しておこ。

[armadillo75]

CSSを使った垂直中央配置の実装（テキスト1行の場合）

[moja8]

vertical-align / "テーブルセルに対してしか効かない"はうそだけど。