【CSS】中央寄せした文字列を折返したら左揃えにする方法

短い文字列は中央に、折り返したら左から

カスケードスタイリングシートの最大の魅力は、デザインです。中央寄せしたり左に揃えたり…。

短い文字列は中央寄せ（以下センタリング）し、折返したら左揃え（左寄せ）で表示する、これが意外にコツがいるんですが、ちょっとしたCSSで実現できます。まずはサンプルコードでご確認ください。

【INDEX】－目次－

検証コード
配置の基本

中央寄せ
折り返した文字列の左揃え

まずはサンプルコードをご覧ください。流し見でオッケーです。

hidariyose.html

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="box">
<p>名言</p>
</div>
<span>　</span>
<div class="box">
<p>ゲーテは言った…。人間の最大の罪は不機嫌であると</p>
</div>

サンプルのCSSです。

sample.css

body{background:oldlace}
.box{width:320px;
    margin:0;padding:10%;
    border:solid 10px #546EB4;
    background:#66CC33}
    
p{margin:2%;padding:1%;line-height:2;background:#fff}

親要素	box	黄緑
子要素	p	白

※枠線には群青色をつけました

結果１

特に設定していないので、左に寄った状態で表示されます。次に枠線に囲まれたboxを中央に寄せます。

配置の基本

親要素の中央配置

box{margin:0 auto}

親要素であるbox（ブロック要素）は、マージンの横の値をautoにすることで中央に配置されます。

結果２

boxが中央に配置されました。文字列も中央に配置されたかのように見えますが、「名言」は左寄せで表示されているので文字列も中央揃えにしたいと思います。

子要素の中央配置

box{text-align:center}

text-alignの値をセンターに指定することで子要素pは中央に配置されます。

結果３

これで真ん中にこだわるレイアウトが出来ました。折り返した文字列も中央に表示されています。

これはこれでいいのですが、文字の区切りによっては中央にあるとなんとなく違和感がある場合もあります。そんな時、折り返し分を左から表示したくなるのも人の道。（ひとそれぞれですが…）

嫌であると？

中央配置した文字列の左揃え

p{text-align:left}

ひとまず子要素に左揃えにするためプロパティtext-align:leftを設定してみます。すると、親要素の設定（中央配置）が無効になり、ふつうに左寄せになってしまいます。

そこで子要素に「いいとこどりのアレ」を追記します。

DISPLAYはインラインでブロック

です。早速追記してみます。

p{display:inline-block}

最終的にこうする

p{
              display:inline-block;
              margin:2%;padding:1%;
              text-align:left;
              line-height:2;background:#fff
            }

結果４