Web Design Leaves

いつも忘れてしまうのでメモ。詳細は以下のサイトで。

参考にさせていただいたサイト：hail2u.net「floatで並べたリストのセンタリング」

以下のように、li 要素をフロートさせた場合、それらを中央寄せするには、「text-align: center;」や「margin: 0 auto;」ではうまくいかない。

<div class="materials">
  <ul>
      <li>gold</li>
      <li>silver</li>
      <li>copper</li>
  </ul>
</div>

/* CSS */
li {
  float: left;
}

以下のようにすると中央寄せできる。

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

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

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

• ul 要素、li 要素に「position: relative;」と「float: left;」を指定
• ul 要素を右に 50% 移動（left: 50%;）
• li 要素を左に 50% 移動（left: -50%;）
• 親要素（.materials）への指定（overflow: hidden;）は横スクロールバーが出ないように
• IEには「position: relative;」が必要（とのこと）