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

CSSで横位置の中央揃えをするときは「text-align:center」と指定するだけでできますが、縦位置の中央揃えを行う「vertical-align:middle」はtableのセル内でしか使えません。

divタグなどで縦位置の中央揃えを行う場合は、少し手間をかける必要がるため、その方法を2パターン紹介します。

縦位置の中央揃えを行うCSS
  1. ボックス要素をテーブルのセル化する
  2. 文字の縦位置を相対位置指定する方法

※以降のサンプルで表示している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の使用方法は以下を参考にして下さい

divider

Trackback URL

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

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>