今回は、「ブロックを中央寄せにしてテキストだけ左寄せにする方法」についてまとめました。
ブロックを中央寄せにしてテキストだけ左寄せにする方法
完成形はこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
ブロック全体は中央寄せですが、中にあるテキストは左寄せになっていることが分かるでしょう。
HTML
<div class="parent">
<p class="text">
ダミーテキストが入ります。<br>
ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。
</p>
</div>
CSS
.parent {
text-align: center;
font-size: 18px;
line-height: 1.5;
background-color: orange;
padding: 20px;
margin: 100px 0;
}
.parent .text {
background-color: #fff;
display: inline-block;
text-align: left;
}
ポイントは、テキストであるtextクラスに対して「display: inline-block;」を指定してブロック要素からインラインブロック要素に変更します。
これにより、コンテンツ量に応じて横幅が決まるようになります。
(ブロック要素だと横いっぱいに幅が広がってしまうので、幅を決めないとテキストだけを中央寄せにすることが出来なくなります。)
そして「text-align: left;」を指定することで、ブロック全体は中央寄せで子要素のテキストだけ左寄せにすることができるようになります。
【おまけ】複数のブロックを中央寄せにしつつ、テキストだけ左寄せにする方法
テキストが1パーツだけだと上記のやり方でOKですが、ブロックが複数縦に並び、且つテキストだけ左に寄せたい場合は、違うやり方が必要になってきます。
デモはこちらです。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
HTML
<div class="content">
<h2>ダミータイトル①</h2>
<p>
ダミーテキストが入ります。<br>
ダミーテキストが入ります。ダミーテキストが入ります。<br>
ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。
</p>
<h2>ダミータイトル②</h2>
<p>
ダミーテキストが入ります。<br>
ダミーテキストが入ります。ダミーテキストが入ります。<br>
ダミーテキストが入ります。ダミーテキストが入ります。ダミーテキストが入ります。
</p>
</div>
CSS
.content {
text-align: left;
max-width: 370px;
margin-top: 50px;
margin: 0 auto;
text-align: center;
}
.content h2 {
text-align: center;
font-size: 30px;
margin-top: 50px;
}
.content p {
font-size: 18px;
margin-top: 50px;
line-height: 1.5;
text-align: left;
}
「display: inline-block;」だと複数ブロックある場合、縦並びでなく横並びになってしまいます。
なので、「max-width」で幅を指定してブロック全体を中央寄せにして、テキストだけに「text-align: left;」を指定したらOKです。
まとめ
以上が、「ブロックを中央寄せにしてテキストだけ左寄せにする方法」でした。
