中央揃えで文字列を左寄せにするやり方　HTML＆CSS

デザインを元にHTMLコーディングをしていると、多種多様なシチュエーションに遭遇し、それぞれ対処していくことになる。普通、テキストの中央揃えをすると下の画像のようになると思う。

text-align:center;というCSSで中央に寄せているわけで、左に寄せたい場合はtext-align:left;になる。

だが、中央に寄せた状態で、さらに左に寄せることもできる。

こんな調子で、上と下で幅が違うのも、ちゃんと中央を基準に左揃えになっている。

下にコードを記載する。

HTML

<div class="centerback">
    <p>このブログは二通りのタイプの人を<br>ターゲットにしています。</p>
</div>

<div class="centerback">
    <p>できれば楽しんで読んでいただきたいという気持ちから、<br>記事のテンションは無理矢理高くしています。</p>
</div>

CSS

.centerback {
    text-align: center;
}

.centerback p {
    display: inline-block;
    text-align: left;
}

display:inline-block;を設定することで、親要素のtext-align:center;が効くようになる。その上でtext-align:left;で左寄せも効くわけだ。

実は単に真ん中を基準にテキストを左揃えするだけなら、.centerback p のwidthを決めてmargin:auto;で中央に寄せてしまった上で、text-align:left;をつければ普通に真ん中で左揃えにすることはできる。

今回紹介した例だと、ページ内の要素の関係性を考えて、widthを設定したくない、<br>などで整形した短文を中央揃えで左寄せにしたい、割と特殊なケースで私は使うことが多いな！