ボックス要素内で縦位置の中央揃えを行うCSS

MarineCorps NewYork By: World Trade Center lights NYC sky on 9th anniversary of attacks
CSSで横位置の中央揃えをするときは「text-align:center」と指定するだけでできますが、縦位置の中央揃えを行う「vertical-align:middle」はtableのセル内でしか使えません。
divタグなどで縦位置の中央揃えを行う場合は、少し手間をかける必要がるため、その方法を2パターン紹介します。
縦位置の中央揃えを行うCSS
※以降のサンプルで表示しているdivタグは、以下のCSSを当てています。
div.sample{ width: 200px; height: 100px; background-color:#51A2C1; color: #fff; margin:10px 0px; padding: 0 0 0 10px; }
ボックス要素をテーブルのセル化する
1つ目は、縦位置の指定がtableのセル(tdタグ)内でしか使えないのであれば、ボックス要素をtableのセル化して縦位置を指定する方法です。
テーブルのセル化
HTML
<div class="table-cell sample">テーブルのセル化</div>
CSS
div.table-cell{ display: table-cell; vertical-align: middle; }
この方法は単純で、「display: table-cell;」でdivタグをセルにするため、「vertical-align」が効くようになります。
文字の縦位置を相対位置指定する方法
相対位置指定する
HTML
<div class="relative sample"> <span class="absolute">相対位置指定する</span> </div>
CSS
div.relative { position: relative; } span.absolute{ position: absolute; top: 50%; left: 15px; margin: -0.5em; }
親要素に「position: relative」子要素に「position: absolute」を指定することで、親要素からの相対位置を指定することができます。
これにより、上から半分の位置 (top:50%) に子要素を配置し、文字の真ん中を中央に持ってくるため文字サイズの半分 (0.5em) だけ上にずらします。
※positionの使用方法は以下を参考にして下さい
Related Posts

Trackback URL
http://webnonotes.com/design/vartical-align/trackback/No Comments Yet