• HOME
  • HTML/CSS
  • CSSでボックスの内容物を上下中央揃えにする方法3種。

CSSでボックスの内容物を上下中央揃えにする方法3種。

管理人:sofu

↑CSSだけでこんな感じに上下中央揃えを実現させるテクニックです。下記の3つの方法を紹介します。

1行のみのテキストを中央揃えにする場合

<!-- HTML -->
        <div>
            <p>1行のみのテキストに有用</p>
        </div>
/* CSS */
    div{
        width: 200px;
        height: 100px;
        background: #DDDDFF;
        text-align: center;
    }
    p{
        line-height: 100px;
    }

→1行のみのテキストを中央揃えにするサンプル

line-heightは行間のスペースを制御するプロパティです。なので、2行以上の文などには利用できません。1行だけの場合には簡単に実装できる有用な方法です。

2行以上のテキストまたは画像を中央揃えにする場合

<!-- HTML -->
    <div>
        <p class="text">2行以上のテキストを中央揃えにする</p>
    </div>
/* CSS */
    div{
        width: 200px;
        height: 100px;
        background: #DDDDFF;
        position: relative;
    }
    p {
        position: absolute;
        top: 50%;
        margin-top: -1em;
    }

→2行以上のテキストまたは画像を中央揃えにするサンプル

margin-topには行数の半分をマイナスで指定します。（2行のテキストなら-1em、3行なら-1.5em）
画像の場合は、画像の高さの半分をマイナスで指定します。

ただ、この方法だとテキストの行数や画像の高さが変わった場合に、中央に揃わなくなります。 テキストの行数や画像の高さの可変に対応するには次の方法が良いと思います。

高さが決まっていない要素を中央揃えにする場合

<!-- HTML -->
    <div class="wrap">
        <div class="box1">
            ボックス1<br />
            ボックス1<br />
            ボックス1<br />
            ボックス1<br />
            ボックス1
        </div>
        <div class="box2">
            ボックス2<br />
            ボックス2
        </div>
    </div>
/* CSS */
    div.wrap {
        border: 1px solid #666666;
        width: 350px;
    }
 
    div.wrap div {
        display: table-cell;
        width: 100px;
        vertical-align: middle;
        font-size: 1.2em;
    }
    div.wrap div.box1 {
        background-color: #FFDDDD;
    }
    div.wrap div.box2 {
        background-color: #DDFFDD;
    }
 
    /* IE 6 */
    * html div.wrap div {
        display: inline;
        zoom: 1;
    }
 
    /* IE 7 */
    *:first-child+html div.wrap div {
        display: inline;
        zoom: 1;
    }
 
    /*\*//*/
    * html div.wrap div {
        display: inline-block;
    }
    /**/

→高さが決まっていない要素を中央揃えにするサンプル

中央揃えにする為にvertical-alignを使っていますが、これはインライン要素のみに効果があります。FireFox・Operaなどはtable-cellを使ってできますが、IEはtable-cellに対応していません（大丈夫かIE・・・）
IEにも適応させるには「インライン要素」で且つ「レイアウト情報を持った（hasLayoutをTrueにする）オブジェクトにさせればいいんです。 display: inline; でインライン要素にし、zoom: 1; でレイアウト情報をもたせるって訳です。
単純な事なんですが、なかなか思いつかない方法ですよね。

date 2010.10.29
blog comments powered by Disqus

PageTop