floatで並べた数個のボックスのセンタリング

カテゴリー: CSS, dreamweaver, IE

center

親ボックスの中に、フロートしている小ボックス(数は増減する)を親ボックスに対してセンターに並べたい。

text-align: center; margin: 0 auto;は効果が無く、
display: inline-block;(IE非対応)やdisplay: table;(IE6,IE7非対応)が使えない状況の時は
下記のようにする。

以下は基本的骨格のみ

.aaa {
  position: relative;
  overflow: hidden;
}

.aaa ul {
  position: relative;
  left: 50%;
  float: left;
}

.aaa ul li {
  position: relative;
  left: -50%;
  float: left;
}

ul要素を右に50%移動、li要素を左に50%移動

うまく行きました!

なぜこれでうまくいくのかはこちらのサイトに説明がありましたよ。

——-その後
IEでもdisplay: inline-block;を使えるようにする方法がみつかった。
スターハックなのですが
li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

これはまだ試してないです。

コメントを残す

メールアドレスが公開されることはありません。