📔
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。