横書きの場合、テキストは左揃えにします。
短いテキストの場合は中央揃えにするケースもあります。
ですが今回、ホームページ作りで次のような形にする必要がありました。
テキストは左揃えで、中央寄せにする。
えっ。どういうこと？
ちょっと想像がつきにくいですが、相反する指定を混在させる必要があります。
どうすればいいのか?
調べてみました。
今回やりたいこと。
今回やりたいのは左揃えの文章を中央に配置することです。
通常文章を左揃えにすると、以下のようになります。
これを以下のようにしたいのです。
テキストは左揃えだけれども、画面の中央にテキストが配置されています。
これをスタイルシートでどうやれば実現できるのか調べてみました。
調べたら思ったより簡単でした。
調べたら、思ったより簡単でした。
テキストを記述しているタグ（今回の例だとPタグ）にinline-blockを指定するだけで実現できました。
論より証拠。
実際にできたものがこちらです。
ソースはこちらです。
<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>テキスト中央寄せ</title>
<style type="text/css">
.box
{
text-align: center;
padding: 20px;
width: 600px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCC;
background: linear-gradient(to right, #FFC 0%, #FFC 50%, #FFF 50%);
}
p
{
text-align: left;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<p>
テキストは左寄せだけど<br>
中央に配置したい。
</p>
</div>
</body>
</html>.boxを中央寄せにすれば、全体的に中央寄せになります。
pタグを inline-blockにすることで、テキストの横幅=文字列合計の横幅になります。
（通常Pタグの横幅は100%になりますが、inline要素があることで、横幅が100%でなくなります）
そのため、テキストは左揃え、レイアウトは中央寄せになるのです。
思いのほか簡単な方法で実現できました。
今まで.boxの横幅を指定したりしていましたが、今度からは横幅を気にせず中央寄せにできます。
久しぶりに、めからうろこな知識を得ることができました。