この記事では「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プロパティで中央寄せ](https://tips-log.com/wp-content/uploads/2024/02/56455ffc-2234-4a83-820c-c4a7c004ce60.png)
このように、要素の中のテキストを中央寄せすることができます。
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が効かない場合と効く場合](https://tips-log.com/wp-content/uploads/2024/02/1df7b5b7-f6a5-473d-9b01-12d951324540.png)
divタグやpタグはブロック要素なので、text-align:centerで中央寄せに配置されます。対して、aタグやspanタグ、imgタグはインライン要素なのでtext-align:centerが効きません。
このように、インライン要素に対してはtext-alignプロパティを指定してもスタイルが効きません。
![text-alignプロパティ](https://tips-log.com/wp-content/uploads/2024/02/Frame-81.png)
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指定](https://tips-log.com/wp-content/uploads/2024/02/3f06ad2c-1229-4932-8a81-1de1404d8c00.png)
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指定](https://tips-log.com/wp-content/uploads/2024/02/16be7610-5108-4b33-a473-ef075b9755ae.png)
画像を中央寄せすることができました。
ブロック要素自体を中央寄せする方法
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;
}
![ブロック要素自体を中央寄せ](https://tips-log.com/wp-content/uploads/2024/02/2acd1011-3d36-4edb-88dd-cd93d68e9bac.png)
また、以下のようにブロック要素(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;
}
![ブロック要素自体を中央寄せ](https://tips-log.com/wp-content/uploads/2024/02/2acd1011-3d36-4edb-88dd-cd93d68e9bac.png)
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](https://tips-log.com/wp-content/uploads/2024/02/1402f87c-5ab6-4ea8-81fe-35830683834a.png)
まとめ
text-align:centerが効かない原因とその対処法について解説しました。中央寄せするのは、text-alignプロパティ以外もあるので、他の方法も検討するなどしてみましょう。