CSSで一行テキストの場合は中央寄せし複数行の場合は左寄せにする方法
Webページで1カラムのレイアウトの時の見出しなど中央寄せにしたい時があるかと思います。しかし閲覧の環境は一定ではなくスマホブラウザなど横幅が狭い閲覧環境ではテキストが複数行になってしまう場合もあります。その時 text-align: center; の指定で中央寄せしている場合は以下のようにすべての行が中央寄せになってしまいます。
text-align: center; を指定した場合の表示
text-align: center; による中央寄せ
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
HTML
<div class="b">
<p class="b1">text-align: center; による中央寄せ</p>
<p class="b2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>CSS
.b > * {
margin: 20px auto;
text-align: center;
}段落が2行になっている場合、1行目は行内に収まる文字数を超えているため文字が両端まで広がっていますが2行目は幅が足りないために中央寄せになります。もし文字数が1行に収まらず2行になる場合に2行目の文字列を左寄せにしたいときはどうすれば良いでしょうか。
display: flex; を指定する
display: flex; を指定すると単一行の場合に中央寄せになり複数行の時に幅の足りない（文字数の足りない）行が左寄せになります。
HTML
<div class="c">
<p class="c1">display: flex; による中央寄せ</p>
<p class="c2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
</div>CSS
.c > * {
display: flex;
justify-content: center;
}CSS の指定は display: flex; の指定と flex box に対し中央寄せするための justify-content: center; を指定します。
以下3つを比較します。
- 指定なし
- text-align: center;
- display: flex;
左寄せ（デフォルト）
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
text-align: center; による中央寄せ
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
display: flex; による中央寄せ
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
※この方法には欠点があり、 display: flex; を指定した要素の中に <span> などの要素を追加した場合デフォルト設定では横並びに表示されてしまいます。
HTML
<div class="d">
<p class="d1">display: flex; による中央寄せ</p>
<p class="d2">
<span class="s1">ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。</span>
<span class="s2">ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。</span>
<span class="s3">みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。</span>
</p>
</div>CSS
.d > * {
display: flex;
justify-content: center;
}display: flex; による中央寄せ
ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。 ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。 みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。
これを解決するためにはいくつか方法があります。
- <p> タグを <div> で囲み、<div> に対して display: flex; を指定する
- <p> 直下に <span> を配置する。CSS の指定はそのまま
1.<p> タグを <div> で囲み、<div> に対して display: flex; を指定する
HTML
<div class="d">
<p class="d1">display: flex; による中央寄せ</p>
<div class="dd">
<p class="d2">
<span class="s1">ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。</span>
<span class="s2">ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。</span>
<span class="s3">みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。</span>
</p>
</div>
</div>CSS
.dd {
display: flex;
justify-content: center;
flex-direction: column;
}display: flex; による中央寄せ
ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。 ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。 みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。
連続して <p> タグを使用する場合はこちらが良いでしょう。ただし基本的に記事等は左寄せにした方が読みやすいため、中央寄せの方が読みやすくなる場面でのみ使うことをお勧めします。
display: flex; のデフォルト設定では要素は横方向に並ぶように指定されているため、要素の整列方向を縦に指定しています。
2.<p> 直下に <span> を配置する。CSS の指定はそのまま
HTML
<div class="d">
<p class="d1">display: flex; による中央寄せ</p>
<p class="d2">
<span>
<span class="s1">ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。</span>
<span class="s2">ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。</span>
<span class="s3">みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。</span>
</p>
</span>
</div>CSS
.d2 {
display: flex;
justify-content: center;
flex-direction: column;
}display: flex; による中央寄せ
ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。ひとつ目の span のテキスト。 ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。ふたつ目の span のテキスト。 みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。みっつ目の span のテキスト。
こちらはどちらかというと見出し向けです。display: flex; が指定されたタグの直下にのみスタイルが機能するため、孫要素には影響がありません。