要素の中央に寄せる方法

Posted on by いま

HTMLのコーディングをする時に忘れがちなので、念のために書いておきます。

方法は様々あるので、状況に応じて使い分ける感じでしょう。

左右中央寄せ

インライン要素を左右中央に寄せる方法

インライン要素は、親要素に「text-align: center」を適用すればできます。

<div id="parent">
    <span>
        サンプル１
    </span>
</div>

#parent {
    width: 600px;
    text-align: center;
}

 

ブロック要素を左右中央に寄せる方法

ブロック要素は、左右のmarginをautoにすればできます。

<div id="parent">
    <div id="child">
        サンプル１
    </div>
</div>
#parent {
    width: 600px;
}
#child {
    width: 80px;
    margin: 0 auto;
}

上下左右中央寄せ

HTML

<div id="parent">
    <div id="child">
        サンプル１
    </div>
</div>

上下左右中央に寄せる方法１

親要素を「position: relative」。

子要素を[position: absolute」、「top」「bottom」「left」「right」を0、「margin:auto」にすることで上下左中央に寄せることができます。

#parent {
    position: relative;
    width: 600px;
    height: 400px;
}
#child {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

 

上下左右中央に寄せる方法２

こちらは親要素に「vertical-align: middle」を適用することで、上下中央寄せにする方法です。

「vertical-align」はインライン要素とテーブルセルのみ効果があるので、

親要素に「display: table-cell」を適用して、テーブルセル要素にしています。

左右中央寄せは、子要素の左右のmarginをautoにして寄せています。

#parent {
    width: 600px;
    height: 400px;
    display: table-cell;
    vertical-align: middle;
}
#child {
    width: 300px;
    height: 200px;
    margin:0 auto;
}

以上です。
紹介した方法以外も調べれば出てくると思います。