CSSでテキストが1行に収まるときだけ中央寄せする
ときどき1行に満たないテキストは中央寄せしたいが、1行以上になる場合は左寄せしたいことがある。これはCSSだけで簡単に実現できる。
こんなHTMLを用意してみる。短いテキストと長いテキスト、どちらも同じHTML構造になっている。
HTML
<p class="text">短い</p>
<p class="text">この文章はとにかく長いです。とても長いです。長すぎて大変です。長いです。長いんです。</p>
CSSは以下のようにする。
CSS
.text {
display: table;
margin: auto;
text-align: left; /* 親要素に text-align: center が効いている場合はこちらも */
}
仕組み
-
display: table
が指定された要素は、子(テキスト)に応じた幅になる。テキストが短ければ、要素幅も短い。 -
table
の要素に対してはmargin-left
とmargin-right
を指定してやれば、左右中央寄せになる。 -
text-align: left
になっていれば、テキストが折り返した場合には左寄せになる
2021/01/13追記: なお、上のCSSは@tak_dcxiさんに教えてもらったものです。ありがとうございます。
以前紹介していた方法
HTML
<div class="container">
<p class="text">短い</p>
</div>
<div class="container">
<p class="text">この文章はとにかく長いです。とても長いです。長すぎて大変です。長いです。長いんです。</p>
</div>
CSS
.container {
text-align: center;
}
.text {
display: inline-block;
text-align: left;
}
-
display: inline-block
が指定された要素は、テキストの長さに応じた幅になる。テキストが短ければ、要素幅も短い。 -
inline-block
の要素に対してはtext-align
が効くので、親要素にtext-align:center
を指定してやれば要素が中央寄せになる。 -
inline-block
の要素自体にtext-align:left
を指定することで中のテキストは左寄せになる。 - テキストが長くなれば
inline-block
の幅は最大になり、中身は左寄せになる。つまりCSSでテキストが1行に収まるときだけ中央寄せになる。
ちなみにinline-block
の代わりにinline-flex
を使ってもOK。