レイアウト

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

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

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

CSS
.center { text-align: center; }
HTML
<div class="center">
テキスト
</div>
表示
テキスト

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

CSS
.table-border { border-collapse: collapse; }
.table-border td { border: 1px solid #333; }
.center { text-align: center; }
.center * { margin-left: auto; margin-right: auto; }
HTML
<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>
表示
東京都13,742,906
広島県2,830,069

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

文字や画像を縦方向の中央に表示するには、スタイルシートの display に table-cell、vertical-align に middle を指定します。

CSS
.vcenter { display: table-cell; vertical-align: middle; }
HTML
<div class="vcenter" style="width:100px; height:70px; border:1px solid gray;">
テキスト
</div>
表示
テキスト

段組するには

段組みを行うには下記のようなスタイルシートを用います。float に left を指定すると、後続の要素が右に並ぶようになります。.multicol::after で指定しているのは clearfix と呼ばれるもので、右並べを終了させるためのものです。Internet Explorer 7 にも対応させるにはもう少し複雑な記述が必要ですが、Internet Explorer 8 以降であれば、下記の記載でうまく動きます。

CSS
.multicol::after {
  content: "";
  clear: both;
  display: block;
}
.multicol .mcol {
  float: left;
  margin-left: 8px;
  width: 100px;
  padding: 2px;
  border: 1px solid gray;
}
HTML
<div class="multicol">
  <div class="mcol">
    いろはにほへとちりぬるを
  </div>
  <div class="mcol">
    わかよたれそつねんらむ
  </div>
  <div class="mcol">
    うゐのおくやまけふこえて
  </div>
</div>
表示
いろはにほへとちりぬるを
わかよたれそつねんらむ
うゐのおくやまけふこえて

文章を縦書きにするには

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

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

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

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

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

Copyright (C) 2003-2017 杜甫々
初版:2003年10月12日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/layout.htm