レイアウト

• トップ
• 逆引きリファレンス
• レイアウト

• 中央に表示する(センタリングする)には
• 縦方向の中央に表示するには
• 段組するには
• 文章を縦書きにするには
• 画像や文字を好きな位置に表示するには

中央に表示する(センタリングする)には

文字や画像を中央に表示(センタリング、中寄せ)するには、スタイルシートの text-align を指定します。

.center { text-align: center; }

<div class="center">
テキスト
</div>

ただし、これだけでは、テーブルなどブロックとして表示される要素には適用できません。テーブルなどのブロック要素に対しては、センタリングしたい要素に対して margin-right と margin-left に auto を指定することによりセンタリングすることができます。

.table-border { border-collapse: collapse; }
.table-border td { border: 1px solid #333; }
.center { text-align: center; }
.center * { margin-left: auto; margin-right: auto; }

<div class="center">
 <table class="table-border">
  <tr><td>東京都</td><td>13,742,906</td></tr>
  <tr><td>広島県</td><td>2,830,069</td></tr>
 </table>
</div>

縦方向の中央に表示するには

CSS の vertical-align がありますが、色々注意が必要です。詳細は「センタリング(中央揃え・中央寄せ)」を参照してください。

段組するには

段組みを行うにはスタイルシートの columns を用います。

.multicol {
  columns: 3;
}

<div class="multicol">
いろはにほへとちりぬるを...
</div>

文章を縦書きにするには

文章を縦書きにするにはスタイルシートの writing-mode を指定します。

.vertical { writing-mode: vertical-rl; }

<div class="vertical" style="width:120px; height:80px; border:1px solid gray; padding:2px;">
いるはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえて
</div>

画像や文字を好きな位置に表示するには

スタイルシートの position を用いることで、画像や文字の表示位置をピクセル単位で指定することができます。下記の例では、「Hello!!」とい文字を、画面の上端から 100ピクセル、左端から 200ピクセルの箇所に表示します。

<div style="position:absolute; top:100px; left:200px;">
Hello!!
</div>