縦方向のセンタリング | My Color 「ダンクハーツ-谷春樹Blog-」縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign="middle"を当てること。 でも、縦にセンタリングするためだけにテーブルつかうのもスマートじゃないし。。。ってときに使えるテクニック。 有名なテクニックで１行の場合のみできるCSSテクニックがあります。 記述方法は下記のようになります。 使用例 CSS .box { height:100px; line-height:100px; background:#fff4f4; } HTML <div class="box"> この文章がセンタリングされます。 </div> 表示 このようにheightとline-heightを同じ値にすると縦のセンタリングが適用されます。 ただし、一行のみの場合しかうまくセンタリングされません。 複数行の場合は下記のように記述します。 使用例 CSS div.box
CSSで中央配置するときのメモ - MotuLog
