インライン要素・ブロック要素の中央寄せの５つの方法【CSS】

CSSで苦労することの１つに要素の中央寄せがあります。中央寄せはWebデザインでは欠かせない手法ですが、やり方を知らないと悩むことになります。

さらに一言で中央寄せと言ってもやり方は様々ある上に、ブロック要素とインライン要素では中央寄せのやり方が全く異なるのが厄介です。

そこでここではインライン要素・ブロック要素ごとの中央寄せのやり方についてまとめます。

インライン要素の中央寄せ

インライン要素とは行の中で定義されて要素分のスペース(幅)しか持たない要素のことです。例えば次のような要素がインライン要素と呼ばれています。

このようなインライン要素の中央寄せの方法は次の通りです。

横方向の中央寄せ

text-align

横方向の中央寄せによく使われるのがtext-alignプロパティです。

これは直接インライン要素に指定するのではなくインラインが属するブロック要素に指定します。例えば以下がそのコード例です。

HTMLコード

<div class="box">
<span>横中央寄せ</span>
</div>

CSSコード

.box
{
    text-align: center;
}

実行結果

このようにブロック要素内で横中央に表示されるようになります。インライン要素に直接指定するわけでないことに注意していください。

縦方向の中央寄せ

vertical-align

vertical-alignプロパティは行の中での画像やテキストなどの縦方向の揃え位置を調整するために使われます。この場合の縦方向とはブロック要素内での位置ではなく行内での位置です。

例えばWordPressで行内で小さな画像を表示する場合、何も考えずにimgタグを直接挿入した場合は次のように画像要素が行からはみ出るような形になってしまいます。

WordPressアイコンを表示

これを期待通りに縦方向に中央寄せしたい場合は次のようなCSSを適用します。

HTMLコード

<div>
WordPressアイコン<img class="vcenter" src="画像パス"/>を表示
</div>

CSSコード

.vcenter
{
    vertical-align: center;
}

このようにvertical-alignを正しく適用すると行内で画像が縦方向に中央ぞろえされます。

WordPressアイコンを表示

• text-align:centerで左右方向に中心寄せ
• vertical-align:centerで上下の中心寄せ

ブロック要素の中央寄せ

ブロック要素は行を作る要素のことです。次の要素がブロック要素に属しています。

marginを使う方法

一般的なのがmarginプロパティに次のような値を設定することです。

margin: 0 auto;

marginに２つの値を渡した場合、１つめの値が上下のマージン、２つめの値が左右のマージンになります。このコードでは左右のマージンをautoに設定することで左右中央に要素が配置されるようになります。

以下のコードでは親要素内でブロック要素を左右中央揃えにしています。

HTMLコード

<div class="parent">
<div class="child">子要素</div>
</div>

CSSコード

.parent
{
    height: 150px;
    padding: 6px; 
    background-color: gray; 
}

.box .child
{
    margin: 0 auto; 

    width: 100px;
    background-color: lightgray; 
}

ブラウザ上では次のように表示されます。

ただし上下方向には中央揃えされないことに注意してください。

フレキシブルボックス(display:flex)を使う方法

フレキシブルボックスとはある要素にdisplay:flexを指定した要素のことで、その直下にある要素が並列になるという性質があります。

これをうまく活用すると上下左右に中央寄せできます。以下はそのコード例です。

HTMLコード

<div class="parent">
<div class="child">上下左右中央ぞろえ</div>
</div>

CSSコード

.parent
{
    display: flex; 
    justify-content: center; 
    align-items: center;

    height: 150px;
    background-color: gray; 
}

.box div.child
{
    width: 100px;
    background-color: lightgray; 
}

このコードで重要なのは次の３行です。

display: flex; 
justify-content: center; 
align-items: center;

display:flexを指定することでフレキシブルボックスになります。そしてjustify-contentが左右のアラインメント、align-itemsが上下のアラインメントを指定するプロパティで上下左右中央寄りにするために両方にcenterを指定しています。

このコードはブラウザでは次のように表示されます。

tranform:translateを使う方法

CSS3からは要素の変形(移動・回転・伸縮・傾斜)ができるtransformプロパティが追加されました。transformには次の４つの変形関数が指定できます。

• translate (移動関数)
• rotate (回転関数)
• scale (伸縮関数)
• skew (傾斜関数)

transformプロパティには次のようにスペースで区切って関数を指定できます。

transform: translateX(10px) translateY(10px);

この例ではtranslateXで要素を右に10px動かし、translateYで要素を下に10pxだけ動かしています。関数にはマイナスの値を指定することも可能です。

次がtransformプロパティで中央寄せするコード例です。

HTMLコード

<div class="parent">
<div class="child">上下左右中央寄せ</div>
</div>

CSSコード

.parent
{
    position: relative; 

    height: 200px;
    background-color: gray; 
}

.child
{
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 

    background-color: lightgray; 
    padding: 12px;
}

このCSSコードでは次のようなことをしています。

まず３行目で親要素のpostionプロパティにrelative、１１行目で子要素のpositionプロパティにabsoluteを指定してます。そうするとtopやleftプロパティで親要素からどれだけ離れた場所から要素を開始するか指定できます。

そしてtop,leftに50%を指定することで親要素の上部と左側から親要素の大きさの50%分だけ離れた場所から子要素を開始しています。

ただそれだと子要素の左上が中心に来るのでtransformプロパティで子要素の大きさの半分だけ左と上に移動させることで完全に上下左右中央寄せになります。

ブラウザでの表示

ここまでで紹介したブロック要素を中央寄せするテクニックは次の通りです。

• margin: 0 auto を指定
• display:flex(フレキシブルボックス)を使う方法
• transformプロパティを使う方法

どういうデザインにしたいのかに応じてこの方法を使い分けるといいでしょう。

以上ここではインライン要素・ブロック要素の中央寄せのやり方についていくつかまとめてみました。