WEB制作(html・css(スタイルシート))に関する各種メモ書き

横幅指定せずに(サイズが可変な)DIVをセンタリングするCSS

一般的には<DIV>をセンタリングするには margin: 0 auto; width:500px; というふうに
サイズを指定してマージンをauto とやるのですが

■ ページネーションなどサイズが可変なDIVをセンタリングするには

<div class="pagination_block">
    <div class="pagination">
        <a href="#">1</a>
        <strong>2</strong>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
    </div>
</div>
. pagination_block {
    text-align: center;
    font-size:0;
}
. pagination {
    display: inline-block;
}

とやればOKです。 親要素のスタイル font-size:0; で余計な隙間を作らないようにしています。

■ インラインブロック(display: inline-block;) 要素とは?

「ブロック要素」は上から下に並びますが「インラインブロック要素」は横に並びます。 画像ファイル<img>タグをイメージするとわかりやすいでしょう。
以下の様な特徴があります。

  • margin , padding を上下左右に指定できる。
  • width , height を指定することができる。
  • vertical-align を指定することができる。
  • 親ブロックのtext-align が有効。

です。


関連エントリー

No.962
12/21 14:40

edit

css