[スタイルシート] センタリング。

スタイルシートを使って、うまく中央配置をする方法は無いかと探してみたら、こんなサンプルを見つけた。

#div_container{
 position: absolute;
 left: 50%;
 height: 100%;
 width: 1000px;
 margin-left: -500px; /* MUST be half the width */
}


何をやっているのかと言うと、

  • 親要素の幅の半分だけ自分を右にずらして、
  • 自分の幅の半分だけ左に戻す。

…ということですな。自分の幅が固定されていなければ使えませんが、これはシンプルですばらしい。

上記は「ブラウザウインドウの幅に対して、コンテンツ全体をセンタリング表示する」ためのスタイルの例として出されているようですね。つまり

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
   #div_container{
    position: absolute;
    left: 50%;
    height: 100%;
    width: 1000px;
    margin-left: -500px;
 }
  </style>
　〜〜
</head>
<body>
<div id="div_container">
　　〜ページの中身〜
</div>
</body>
</html>


…なんてやってやれば、ブラウザウインドウの横幅に関わらず中身がウインドウの中央に配置されるというわけです。

ふむ。

position:absolute; を指定すると、「position:static; 以外の値が指定されている親要素の左上、または(親要素にposition:static; 以外が指定されていなければ)ウインドウの左上」を基準点として、自分の表示位置をズラします。
position:relative; を指定したならば、「自分の本来の表示位置の左上」を基準点として、自分の表示位置をズラします。

というわけで、上の例をposition:relative; に変えてみると、いちいち全ての親要素にposition指定してまわらなくても同じ効果が得られます。


スタイル指定はこんな感じ。
.parent{
width:300px;
height:200px;
border: solid 1px #00f;
background-color:#aaf;
}
.child{
position:relative;
left:50%;
width:200px;
height:150px;
margin-left:-100px;
border: solid 1px #f00;
background-color:#faa;
}
.grandchild{
position:relative;
left:50%;
width:230px;
height:100px;
margin-left:-115px;
margin-top:20px;
border: solid 1px #0f0;
background-color:#afa;
}
---
で、htmlは、
<div class="parent">
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>


…ね。
子要素の幅が、親要素の幅より大きくても(つまり子要素の幅がはみ出しちゃっても)大丈夫。親要素と子要素のセンターはばっちり合います。

ということで、話は縦書きWeb用スタイルシートに移っていきたいわけですが、それはまた次回。

　　→ このCSSの元ネタはコチラ　(英語)。
　　→ 日本語の紹介ページはコチラ (CSSのtext-align:center;は<div>には通用しない｜スイナシア)

カテゴリ:

タグ: