熟語的利用例

いくつか典型的な利用例を示す。

中央揃え

テキストの中揃え

テキストや、画像などの置換要素を中央揃えするには text-align 特性に center を指定する。

p.naka {text-align: center;}
img {border: 1px solid red;}

<p class="naka">中揃え<br>
<img src="ninpic.png" alt="Nintaro" width="230" height="170">
</p>

中揃え

ブロックレベル要素の中揃え

text-align 特性はブロックレベル要素には適用できない。ありがちな 間違としてはtable要素(表)をセンタリングしようとして text-align を使って しまうものがある。

見栄えが分かりやすいようborderをつける以下のスタイルを 定義しておく。

table, td {border: 1px solid; border-collapse: collapse;}

text-align: center としても表ではなく、各セルの内容が 中央揃えされる。

<table style="text-align: center;">
 <tr><td>あいうえお</td><td>あ</td></tr>
 <tr><td>か</td><td>かきくけこ</td></tr>
</table>

tableはブロックボックスの配置で決めるので、marginを利用して 中央揃えする。

<table style="margin-left: auto; margin-right: auto">
 <tr><td>あいうえお</td><td>あ</td></tr>
 <tr><td>か</td><td>かきくけこ</td></tr>
</table>