文字や画像を中央に表示(センタリング、中寄せ)するには、スタイルシートの 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>
東京都 | 13,742,906 |
広島県 | 2,830,069 |
CSS の vertical-align がありますが、色々注意が必要です。詳細は「センタリング(中央揃え・中央寄せ)」を参照してください。
段組みを行うには下記のようなスタイルシートを用います。float に left を指定すると、後続の要素が右に並ぶようになります。.multicol::after で指定しているのは clearfix と呼ばれるもので、右並べを終了させるためのものです。Internet Explorer 7 にも対応させるにはもう少し複雑な記述が必要ですが、Internet Explorer 8 以降であれば、下記の記載でうまく動きます。
.multicol::after { content: ""; clear: both; display: block; } .multicol .mcol { float: left; margin-left: 8px; width: 100px; padding: 2px; border: 1px solid gray; }
<div class="multicol"> <div class="mcol"> いろはにほへとちりぬるを </div> <div class="mcol"> わかよたれそつねんらむ </div> <div class="mcol"> うゐのおくやまけふこえて </div> </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>