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

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

見出しや短文を中央に配置したいけれど、折り返した際の文字揃えが気になる…そんなCSS調整の悩みを解決します。ブログ、LP、レスポンシブデザインでも活用できる実装テクニックです。

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
            }

結果４