2008年8月31日日曜日

CSS で要素をセンタリング - テーブルと文字列を中央に配置する

1. HTML の要素をセンタリング

HTML の要素をセンタリングしたい。

1. ボックスのセンタリング

margin: auto

ブロックレベル要素の左右のマージンを両方共に「auto」に設定すると、両者が同じ値となるため、結果としてボックスがセンタリングされます。

(詳解HTML&XHTML&CSS辞典, p399 より)

 

2. ブロックレベル要素のセンタリング

text-align: center

「中央揃え」に設定します。

(詳解HTML&XHTML&CSS辞典, p377 より)

 

3. 垂直方向

垂直方向で真ん中に配置するには、

  • vertical-align: middle

(詳解HTML&XHTML&CSS辞典, p379)

 

2. 例

  1. id が content である div 要素 (ピンク色の部分) をセンタリングし、
  2. その中の文字「ぴよ」を中央揃えにし、
  3. テーブル要素もセンタリングする。

080830-004

<html>
  <head>
    <title>要素をセンタリング</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style>
    <!--
    #content {
        margin: 10% auto;
        width: 60%;
        background-color: #fbb;
    }
    .piyo {
        text-align: center;
    }
    
    table {
        margin: auto;
        border-collapse: collapse;
        border: solid 1px;
    }
    tr, td {
        border: solid 1px;
    }
    -->
    </style>
    
  </head>
  <body>

    <div id="content">
    
        <p>ほげ</p>
        <p class="piyo">ぴよ</p>
        <p class="piyo">ぴよぴよ</p>
        
        <table>
            <tr>
                <td>hoge</td>
                <td>piyo</td>
            </tr>
            <tr>
                <td>hogehoge</td>
                <td>piyopiyo</td>
            </tr>
        </table>
        
    </div>

  </body>
  • content を margin の auto によってセンタリング。
  • 「ぴよ」は text-align で center と指定。
  • テーブルは、 content を指定したときのように、margin の auto によってセンタリングをする。

投稿者 jutememo 時刻: 1:10

ラベル: ,

登録: コメントの投稿(Atom)