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

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の使用方法は以下を参考にして下さい

http://webnonotes.com/design/vartical-align/trackback/

Web’Notes