htmlcss floatで並べた li 要素の中央寄せ

2013年9月21日

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

参考にさせていただいたサイト: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;」が必要(とのこと)