横並びさせたUL/OLのリストを横にも縦にもセンタリングさせるスタイルシートッッ！

2014.03.28.

ホーム

プログラミング

CSS

He is coding the css

Photo by: Joakim Westerlund

長年思い悩んだ問題が今日やっと解決しやがりましたよ・・・。

非常に便利なUL/OLタグですが、横にも縦にもなかなかセンタリングしやがりません。

しょうがないから今まで結構力業（ピクセル指定）でやってたりしてたのですが、今日ようやく出来やがったのでその書き方をメモしておきます。

横並びさせたUL/OLのリストを横にも縦にもセンタリングさせる書き方。

参考にしたのは、floatで横並びさせたリストをセンタリングする時のメモと縦位置中央揃えvertical-alignが効かないの記事でした。

この二つを読んで、ULは通常の書き方では絶対横にセンタリングしないのと、vertical-alignはブロック要素には絶対効かないことを学びました。

というわけで、学んだことを踏まえて、やっと横並びさせたUL/OLのリストを横にも縦にもセンタリングさせるスタイルシートが完成しました。

それが以下のコードです。↓↓

<div id="listField">
 <ul>
  <li>水樹奈々</li>
  <li>柏木由紀</li>
  <li>中川翔子</li>
 </ul>
</div>

#listField {
 position:relative;
 overflow:hidden;
}
#listField ul {
 float: left;
 position: relative;
 left: 50%;
}
#listField li {
 position: relative;
 left: -50%;
 display: table-cell;
 vertical-align: middle;
 float: left;
}

どの要素も、順番もそのままに入れないと動作しないのでご注意を。

あーやっと出来たぜ・・・。LIGさんとDRYな備忘録さんにマジ感謝・・・。

あとがき

@isloopさんをフォロー

ちなみにこのスタイルシートは、各社バラバラなサイズでたいへんこんちくしょうなソーシャルボタンを並べるリストを作る際に大変に有用です。

« 前の記事