記事内に広告が含まれています。

text-align:centerが効かない！text-alignは何に効くCSSか

Sep 17, 2017

CSS,HTML,JS , コーディング

テキストをセンター揃えにしたい時に、当たり前のように記述するtext-align:center;ですが、時々、text-align:centerが効かないように思う時があるんです。

特にdivタグ、text-align:centerが効く時と効かない時があるような・・・。

ちょっと苦労したので、text-alignの特徴について改めて整理してみました。

1. text-alignは何に効くCSSか

text-alignは、ブロック要素に指定するCSSです。
そして、そのブロック要素の中のインライン要素に効きます。

ブロック要素とインライン要素

htmlの要素は、ブロック要素とインライン要素に分類することができます。

ブロック要素とは

ブロック要素は、ページを構成する上でのひとつの塊のことで、divやh1などの見出しタグやpタグ、ulタグやulの中のliタグなどもブロック要素です。
divタグなどは他のブロック要素を入れ子にすることができますが、h1などの見出しタグや、pタグなどは中にインライン要素しか入れることができません。

<div><p>テキストテキスト</p></div>　← これはＯＫ！

<p>テキスト<div>テキスト</div></p> ← これはダメ！

インライン要素とは

インライン要素とは、文章や文章の一部として扱われるようなもののことで、aタグやspanタグ、strongタグなどです。imgタグ、inputタグ、textareaタグなどもインライン要素です。

text-alignはpタグやh1などの見出しタグ、divタグなどのブロック要素に指定するCSSですが、その効果はテキストなどのインライン要素にでます。

つまり、ブロック要素自体に効いているわけではなく、ブロック要素の中のインライン要素に効いています。

以下のコードと表示結果を見ると、わかりやすいかもしれません。

See the Pen txt-align01-03 by natsuki (@natsukimemo) on CodePen.

<p class="sample01">
    sample<br>
    01
</p>
<p class="sample02">
    sample<br>
    02
</p>
<p class="sample03">
    sample<br>
    03
</p>

p.sample01{
  border:1px solid #f00;
  width:250px;
  text-align:center;  
}
p.sample02{
  text-align:center;  
}
p.sample03{
  border:1px solid #f00;
  text-align:center;  
}

上記のsample01は、ブロック要素であるpタグに幅(width)と枠線(border)を指定しました。
pタグの中のテキストはセンター揃えになっていますが、pタグ自体が画面の中央に配置されてはいません。

sample02を見ると、あたかもpタグ自体がセンターに配置されたかのように見えますが、これはpタグはwidthを指定しないと横幅100％になるからで、pタグの中のテキストのみがセンター揃えになっています。

sample03の、pタグにborderを指定したのを見るとわかりやすいかもしれません。

では、ブロック要素自体をセンターに配置するにはどうすればいいのでしょうか。

ブロック要素をセンターに配置したい時は

ブロック要素をセンターに配置したい場合は、widthを指定してからmarginの左右にautoを指定します。

ブロック要素を横中央に配置するCSS

ブロック要素にwidthで幅を指定する
更に、左右のmarginにautoを指定する

では、sample01をテキストもpタグもセンターにしてみます。

See the Pen gyaPJE by natsuki (@natsukimemo) on CodePen.

<p class="sample01">
    sample<br>
    01
</p>

p.sample01{
    border:1px solid #f00;
    width:250px;
    text-align:center;  
    margin:0 auto;
}

pタグのmarginの左右にautoを指定することで、中央に配置されました。

2. 子要素は親要素のtext-alignを継承する

子要素は親要素のtext-alignを継承します。
ですが、継承しない時もあります。

divタグで要素を入れ子にして、その動きをいろいろみてみましょう。

2-1. divタグにtext-alignを指定して子要素が継承している時1

See the Pen OGyNLe by natsuki (@natsukimemo) on CodePen.

<div>
  <table border="1">
      <tr><td>１</td><td>２</td></tr>
      <tr><td>３</td><td>４</td></tr>
  </table>
</div>

div{
    text-align:center;
}
td{
  width:100px;
}

上記は、divの中にtableタグを入れ子にしています。そして、tableの中にテキストが入っています。
divタグの中のtableタグはブロック要素になります。

この場合、text-alignはtdタグの中のインライン要素であるテキストに効いているため、セル内でテキストがセンターに配置されています。

このtdタグの中のテキストは、親ブロック要素であるdivのtext-alignを継承しています。

このtableタグ自体を中央に配置するには、marginの左右にatuoを指定します。

2-2. divタグにtext-alignを指定して子要素に継承している時2

次はpタグをdivタグの入れ子にしてみます。

See the Pen bJVpdG by natsuki (@natsukimemo) on CodePen.

<div class="outBox">
<p class="inBox">sample<br>
04</p>
</div>

div.outBox{
    text-align:center;   
}

これも、pタグの親要素であるdivタグのtext-alignを継承してセンターに配置されています。
widthを指定しないので、画面中央に配置されています。

2-3. divタグにtext-alignを指定して子要素に継承していない時

次に、divタグにtext-alignを指定して子要素に継承していない例です。
htmlは上記の2-2と全く同じでdivの中にpタグを入れ子にしています。

cssはpタグとdivタグ両方にtext-alignを指定しています。

See the Pen BEoKKB by natsuki (@natsukimemo) on CodePen.

<div class="outBox">
<p class="inBox">sample<br>
05</p>
</div>

p.inBox{
    text-align:right;   
}
div.outBox{
    text-align:center;   
}

上記のcssは、2行目でpタグにtext-align:right;を指定して右寄せにしています。
その後で5行目でdivタグにtext-align:center;を指定しています。

この場合、pタグにtext-align:rightが指定されているので、それが効いて右寄せになっています。
親要素のdivタグの、text-alignは効きません。
pタグにtext-alignが指定されているから継承されないのです。

3. text-alignの動きまとめ

text-alignの動きまとめ

text-alignは、ブロック要素に指定して、その中のインライン要素に効く
親要素のtext-alignを子要素は継承する
子要素にtext-alignが指定されていれば親要素のものは継承されない

私はこれまでセンターに配置したい時に、いたるところでtext-align:centerを指定して上手くいく時と行かない時があったので（・・・バカですっっ///。。）、今回ちょっと整理する目的で記事を書いてみました。

【番外】WEB制作におすすめの本

リンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

リンク