HTML/CSS

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

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

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

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

原因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アクセスランキング にほんブログ村