HTML/CSS

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

本記事では、CSSのtext-align:centerが上手く適用されず中央寄せされない原因と対処法について解説しています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

原因1:インライン要素に適用させている

原因の1つ目は、text-align:centerをインライン要素に適用させていることです。これが一番text-align:centerが効かない原因で多いです。

下記のサンプルコードでは、pタグ内にあるspanタグに対してtext-align:centerを適用させています。

<p>
  <span>テスト</span>
</p>
span{
  text-align:center;
}

このように、text-align:centerを適用させているのに中央寄せがされません。

text-align:centerとは、インライン要素を中央寄せすることができるためインライン要素に適用させがちですが、中央寄せしたいインライン要素を囲っているブロック要素に対して適用させないと中央寄せがされます。

代表的なインライン要素とブロック要素
  • インライン要素:<a></a>、<span></span>、<img>
  • ブロック要素:<p></p>、<div></div>

先ほどのサンプルコードのspanタグで適用しているtext-align:centerをpタグに適用させてみましょう。

p{
  text-align:center;
}

すると、テキストが中央寄せされるようになりました!

原因2:ブロック要素を中央寄せしようとしている

原因の2つ目は、text-align:centerでブロック要素を中央寄せしようとしていることです。これはtext-align:centerは効いているようだけど、画面の中央に配置されない原因につながります。

下記のサンプルコードでは、ブロック要素に対して幅50%を指定した状態でtext-align:centerを適用させています。

<div>
  <p>テスト</p>
</div>
div{
  max-width:50%;
  text-align:center;
  
  /* ↓装飾 */
  background:#000;
  color:#fff;
  padding:10px;
}

このように黒背景色内でテキストは中央寄せできている状態ですが、画面中央に配置することができていません。

このように、ブロック要素に対して幅を指定した場合はtext-align:centerでは中央に配置することができないため、margin:0 autoを使います。margin:0 autoとは、幅を指定した際に右側に出るスペースを左右均等にします。

例えば、ブロック要素に幅1000pxを指定しmargin:0 autoを設定したとします。これを画面幅1200pxのデバイスで見た時に200px分のスペースを左に100px・右に100pxと割り振ります。

それでは、先ほどのサンプルコードのdivタグに対してmargin:0 autoを適用させて表示を確認してみましょう。

div{
  max-width:50%;
  text-align:center;
  margin:0 auto;  

  /* ↓装飾 */
  background:#000;
  color:#fff;
  padding:10px;
}

すると、div要素が中央寄せされるようになりました!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村