ホームへ

【CSS】margin:autoとtext-align:centerの違いと使い分け

CSSで中央寄せする方法を調べると「margin:auto」と「text-align:center」の方法が紹介されます。だからといってよく理解せずに使うとうまく中央寄せできません。

margin:autoとtext-align:centerの違いと使い分けを解説します。

【結論】中央寄せしたい要素がインライン要素かブロック要素か

margin:autoを使うかtext-align:centerを使うかは、中央寄せしたい要素がインライン要素ブロック要素かで判断します。

インライン要素とはaタグやimgのように横に並ぶ要素です。

ブロック要素とはdivやpタグのように縦に並ぶ要素です。

インライン要素なら親にtext-align:center

ブロック要素なら自身にmargin:autoを指定することで中央寄せになります。

インライン要素→親にtext-align:center

インライン要素またはinline-blockの場合、text-align:centerを使います。

text-alignが機能する条件は下記のとおりです。

  • 親要素に指定する
  • 親要素に余白がある
  • 子要素がインライン要素(またはinline-block)

<style>
.example{
    /*コレ*/text-align: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example"><a href="#">中央寄せする要素</a></div>

ブロック要素→自身にmargin:auto

ブロック要素またはtableの場合、margin:auto(margin:0 auto)を使います。

margin:autoが機能する条件は下記のとおりです。

  • 自身に指定する
  • 親と子の幅が一致していない(paddingを除いた幅より小さい)
  • 自身がブロック要素(またはtable)

中央寄せする要素
<style>
.example2{
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
.example2>div{
    /*コレ*/margin: auto;
    width: 200px;
    background: #ffffff;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example2"><div>中央寄せする要素</div></div>

どちらでも→親にdisplay:flexとjustify-content:center

インライン要素だろうがブロック要素だろうが関係なく中央寄せできるのがjustify-content:centerです。

justify-content:centerが機能する条件は下記のとおりです。

  • display:flexとセットで指定する
  • 親要素に指定する
  • 親と子の幅が一致していない(paddingを除いた幅より小さい)

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example3"><a href="#">インライン要素</a></div>

ブロック要素
<style>
.example4{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
.example4>div{
    width: 200px;
    background: #ffffff;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example4"><div>ブロック要素</div></div>

なお、インライン要素が改行されると左寄せになります。

改行しても中央寄せにしたい場合は「text-align:center」を使いましょう。

【まとめ】margin:autoとtext-align:centerの違いと使い分け

中央寄せする要素指定する要素
margin:autoブロック要素自身
text-align:centerインライン要素親要素
justify-content:centerなんでも親要素

以上、margin:autoとtext-align:centerの違いと使い分けでした。

マンガで読める関連記事