CSS

【CSS】text-align:centerが効かない原因徹底解説

※ 当サイトではアフィリエイト広告を利用しています

【CSS】text-align:centerが効かない原因徹底解説

この記事では「text-align:centerが効かない原因」について解説します。

また、text-alignプロパティが効かない場合の対処法についても解説していきます。

この記事を読むと...
  • text-align:centerが効かない原因と対処法について分かる
  • text-alignプロパティの使い方が理解できる

text-alignプロパティとは

text-alignプロパティは、要素の位置を調整するプロパティです。

基本的には、text-alignプロパティの値で、leftで左寄せ、centerで中央寄せ、rightで右寄せにすることができます。

以下は中央寄せする場合のコードです。

See the Pen text-alignプロパティ by 山中滉大 (@tips-web) on CodePen.

<div>要素</div>
div {
  border: 1px solid #000;
  text-align: center;
}
text-alignプロパティで中央寄せ

このように、要素の中のテキストを中央寄せすることができます。

text-align:centerが効かない原因

text-align:centerが効かない場合、「インライン要素」に対して指定している可能性があります。

例えば、以下のコードで確認すると、ブロック要素とインライン要素では、ブロック要素に対してのみtext-align:centerが効いています。

See the Pen text-align:centerが効かない by 山中滉大 (@tips-web) on CodePen.

<!-- ブロック要素 -->
<p>pタグ:ブロック要素です</p>
<div>divタグ:ブロック要素です</div>


<!-- インライン要素 -->
<a href="">aタグ:インライン要素です</a>
<span>spanタグ:インライン要素です</span>
<img src="https://tips-log.com/wp-content/uploads/2024/02/test1.jpg" alt="">
p,div,a,span,img{
  border: 1px solid #000;
  text-align: center;
}


img {
  max-width: 100px;
}
text-align:centerが効かない場合と効く場合

divタグやpタグはブロック要素なので、text-align:centerで中央寄せに配置されます。対して、aタグやspanタグ、imgタグはインライン要素なのでtext-align:centerが効きません。

このように、インライン要素に対してはtext-alignプロパティを指定してもスタイルが効きません。

text-alignプロパティ

text-align:centerが効かない場合の対処法

text-align:centerが効かない場合の対処法として以下のような方法があります。

  • インライン要素にdisplay:block指定
  • インライン要素を親要素で囲って、親要素にtext-align:center指定

インライン要素にdisplay:block指定

text-align:centerが効かない場合、インライン要素にはdisplay:block;を指定するとスタイルが効くようになります。

See the Pen インライン要素にdisplay:block指定 by 山中滉大 (@tips-web) on CodePen.

<a href="">aタグ:インライン要素です</a>
<span>spanタグ:インライン要素です</span>
a,span {
  border: 1px solid #000;
  text-align: center;
  display: block;
}
インライン要素にdisplay:block指定

spanタグとaタグの中のテキストを中央寄せすることができました。

インライン要素を親要素で囲って、親要素にtext-align:center指定

imgタグを中央寄せする場合は、以下のようにimgタグをdivタブなど親要素を囲って、その親要素に対して、text-align:centerを指定します。

See the Pen インライン要素を親要素で囲って、親要素にtext-align:center指定 by 山中滉大 (@tips-web) on CodePen.

<div>
  <img src="https://tips-log.com/wp-content/uploads/2024/02/test1.jpg" alt="">
</div>
div {
  text-align: center;
  border: 1px solid #000;
}
img {
  max-width: 100px;
}
インライン要素を親要素で囲って、親要素にtext-align:center指定

画像を中央寄せすることができました。

ブロック要素自体を中央寄せする方法

pタグやdivタグなどブロック要素自体を中央寄せする場合は、以下のようにブロック要素にinline-blockを指定して、その親要素にtext-align:center指定で中央寄せできます。

See the Pen ブロック要素自体を中央寄せする方法 by 山中滉大 (@tips-web) on CodePen.

<div class="parent">
  <div class="child">要素</div>
</div>
div {
  border: 1px solid #000;
}

.parent {
  text-align: center;
}

.child {
  width: 120px;
  display: inline-block;
}
ブロック要素自体を中央寄せ

また、以下のようにブロック要素(child要素)にmarginプロパティで中央寄せすることもできます。

この場合、中央寄せするブロック要素には横幅を指定する必要があります。

See the Pen ブロック要素自体を中央寄せする方法 by 山中滉大 (@tips-web) on CodePen.

<div class="parent">
  <div class="child">要素</div>
</div>
div {
  border: 1px solid #000;
  text-align:center;
}

.child {
  width: 120px;
  margin: 0 auto;
}
ブロック要素自体を中央寄せ

flexboxを使う

flexboxを使って、要素を中央寄せすることもできます。この場合、ブロック要素もインライン要素も中央寄せすることができます。

See the Pen flexbox by 山中滉大 (@tips-web) on CodePen.

<!-- ブロック要素 -->
<p>pタグ:ブロック要素です</p>
<div>divタグ:ブロック要素です</div>


<!-- インライン要素 -->
<a href="">aタグ:インライン要素です</a>
<span>spanタグ:インライン要素です</span>


<div>
  <img src="https://tips-log.com/wp-content/uploads/2024/02/test1.jpg" alt="">
</div>
p,div,a,span{
border: 1px solid #000;
text-align: center;
display: flex;
justify-content: center;
}


img {
  max-width: 100px;
}
flexbox

まとめ

text-align:centerが効かない原因とその対処法について解説しました。中央寄せするのは、text-alignプロパティ以外もあるので、他の方法も検討するなどしてみましょう。

  • この記事を書いた人
アバター画像

こうだい

兼業でWeb制作事業|31歳|本業畑違いで知識0から学習開始→1年目で初案件獲得→2年で月の兼業受注金額70万円達成|4年目で100万円達成(今ここ)|兼業でも稼げることを確信|Web制作メンター|制作費無料のホームページ制作事業運営|コーディング・ホームページ制作のご依頼もお待ちしております

-CSS
-