CSS text-align:centerが効かない原因と対処法

text-alignはテキストや画像の位置を左寄せ・中央寄せ・右寄せにするCSSです。

しかし効かせるには条件があります。その条件を知らずに使うと「なんで中央寄せにならないの!?」となり、うまくいきません。

私はホームページを作って9年になります。text-alignは何度も使っています。

CSS text-align:centerが効かない原因と対処法について具体例を挙げながら解説します。

原因：text-alignはブロック要素内のインライン要素の位置を変えるCSSだから

text-alignはブロック内のテキストや画像の位置を調整するCSSです。

ブロック要素や表自体を中央寄せすることはできません。

また、spanやimgなどのインライン要素に指定しても効きません。

ブロック要素とはdiv、h2のように横幅いっぱいになり、その左右には要素が置かれない要素です。

インライン要素とはa、span、imgのように文字の要素でその左右に文字が並ぶ要素です。

ブロック要素やインライン要素について詳しくはこちら↓

ブロック要素を中央寄せしたい場合はこちらを参考にしてください。

さてここからはテキストや画像を中央寄せしたいのにできない場合のお話です。

text-alignが効く条件とは以下の3つです。

text-alignが効かないときは上記の条件を満たしていないでしょう。

対処方法：ブロック要素に指定する＆ブロック要素内にインライン要素がある

上記3つの条件を満たして成功した例が下記です。

<style>
.example{
    /*コレ*/text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example"><a href="#">text-align: center</a></div>

さてこれより以下では先の3つの条件に当てはまらず失敗した例とそれを修正した成功例を紹介します。

失敗例1：aタグにtext-align指定

条件の1つ目「ブロック要素に指定していること」を満たしていない例です。

aタグにtext-alignを指定しても横の位置を変えることはできません。

<style>
.example2{
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
.example2 a{
/*コレ*/text-align: center;
}
</style>
<div class="example2"><a href="#">text-align: center</a></div>

成功例1：aタグの外のブロック要素にtext-align指定

aタグにtext-alignを指定するのではなく、その外のブロック要素にtext-alignを指定しましょう。

<style>
.example{
    /*コレ*/text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example"><a href="#">text-align: center</a></div>

成功例2：aタグをブロック要素にする

aタグ自身に「display:block」を指定するとtext-alignが効く条件を満たすことができます。

<style>
.example3{
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
.example3 a{
    text-align: center;
    /*コレ*/display: block;
}
</style>
<div class="example3"><a href="#">text-align: center</a></div>

クリック範囲が変わりますので、意図的なデザインかどうかは確認しましょう。

失敗例2：text-alignでdivを中央ぞろえしようとする

条件の2つ目「そのブロック要素内にインライン要素があること」を満たしていない例です。

<style>
.example4{
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
.example4>div{
    width: 30px;
    height: 30px;
    background: #103bcc;
}
</style>
<div class="example4"><div></div></div>

text-alignはインラインの子要素の位置を変えるCSSでありブロック要素の位置を変えることはできません。

成功例1：子要素をインライン要素にする

<style>
.example8{
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
.example8>div{
    /*コレ*/display: inline-block;
    width: 30px;
    height: 30px;
    background: #103bcc;
}
</style>
<div class="example8"><div></div></div>

子要素に「display: inline-block」を指定することで幅や高さを指定できるインライン要素になります。

幅や高さが不要であれば「display:inline」で普通のインライン要素になります。

成功例2：ブロック要素にmargin:autoとwidth指定

<style>
.example5{
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
.example5>div{
    /*コレ*/margin: auto;
    width: 30px;
    height: 30px;
    background: #103bcc;
}
</style>
<div class="example5"><div></div></div>

divをブロック要素のまま中央ぞろえしたい場合は「margin:auto」と「width」を指定する必要があります。text-alignではブロック要素を中央ぞろえできません。

↓ブロック要素の中央揃えはこちらを参考にしてください。

失敗例3：divの横幅が狭い

条件の3つ目「ブロック要素に幅があること」を満たしていない例です。

<style>
.example6{
    display: inline-block;
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example6"><a href="#">text-align: center</a></div>

こちらは「display:inline-block」を指定しています。これを指定すると子要素の幅に合わせて自動で横幅が狭くなります。

厳密に言うと「text-align: center」は効いているのですが、左右に幅がないので中央寄せになっているように見えない、という状態です。

成功例1：widthを指定して横幅確保

<style>
.example7{
    width: 300px;
    display: inline-block;
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example7"><a href="#">text-align: center</a></div>

widthで横幅を指定して左右の空白を確保すれば中央寄せを確認できます。

失敗例4：display:flexにtext-alignを指定している

text-alignではdisplay:flexの子要素の位置変更はできません。

<style>
.example9{
    /*コレ*/display: flex;
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example9"><a href="#">text-align: center</a></div>

成功例1：display:flexを解除する

display:blockで上書きしてflexを解除しましょう。

<style>
.example10{
    display: flex;
    /*コレ*/display: block;
    text-align: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example10"><a href="#">text-align: center</a></div>

成功例2：justify-contentを指定する

justify-contentはflexの子要素の位置を指定するCSSです。

「justify-content: center」を指定することで中央寄せが可能です。

<style>
.example11{
    display: flex;
    /*コレ*/justify-content: center;
    border:1px solid #333;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example11"><a href="#">text-align: center</a></div>

【まとめ】CSS text-alignが効かない原因と対処法

text-alignが効く条件とは以下の3つ

text-alignが効かないときは上記の条件を満たしているか確認しましょう。

ブロック要素を中央寄せしたいときは「margin:auto」と「width」を指定しましょう。

display:flexにはjustify-contentで位置変更しましょう。

以上、CSS text-align:centerが効かない原因と対処法でした。