displayの使いどころ
floatなしで要素を横並びにする(display:inline-block)
display:inline-block;を使ったやり方。 若干難ありな所はあるものの、ある程度ならいける。IEの古いバージョンは切り捨てで。
---------------------------------------------- HTML ---------------------------------------------- <ul id="btn_ib"> <li><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> <li><a href="">ボタン3</a></li> <li><a href="">ボタン4</a></li> </ul> ---------------------------------------------- CSS ---------------------------------------------- #btn_ib{ background:#666; } #btn_ib li{ display:inline-block; width:20%; } #btn_ib li a{ display:block; padding:10px 0; } #btn_ib li a:hover{ background:#999; }
floatなしで要素を横並びにする(display:table-cell)
display:table-cell;にvertical-align:middle;を設定すると、その中にある要素を天地の中央に配置できる。
ただし、中央揃えになるのは子要素なので、メニューに適用したい場合はaに設定して、その中に子要素を配置しなければいけない。
---------------------------------------------- HTML ---------------------------------------------- <ul id="btn_tc01"> <li><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> <li><a href="">ボタン3</a></li> <li><a href="">ボタン4</a></li> </ul> <div id="btn_tc02"> <a href=""><span>ボタン1</span></a> <a href=""><span>ボタン2</span></a> <a href=""><span>ボタン3</span></a> <a href=""><span>ボタン4</span></a> </div> ---------------------------------------------- CSS ---------------------------------------------- /* #btn_tc01 */ #btn_tc01 li{ display:table-cell; vertical-align:middle; width:120px; height:50px; background:#666; } #btn_tc01 li a:hover{ display:block; background:#999; } /* #btn_tc02 */ #btn_tc02 a{ display:table-cell; vertical-align:middle; width:120px; height:50px; background:#666; } #btn_tc02 a:hover{ background:#999; }
floatなしで要素を横並びにし、かつ上下左右中央揃えにする
(display:inline-block;, display:table;, display:table-cell;を併用)
高さが決められた要素を横並びにしつつ、かつその要素の中の、高さがそれぞれ違う中身を上下左右中央揃えにする方法。 親子関係にある要素双方にdisplayを設定します。 上記のサンプルでtable-cellを使用しているものはmarginの設定ができないので、その辺の対策も含めて。
---------------------------------------------- HTML ---------------------------------------------- < !-- その1 -- > <div id="ib-and-tc"> <div><a href="">ボタン<br>ボタン<br>ボタン</a></div> <div><a href="">ボタン<br>ボタン</a></div> <div><a href="">ボタン</a></div> </div> < !-- その2 -- > <div id="table"> <a href="">ボタン<br>ボタン<br>ボタン</a> <a href="">ボタン<br>ボタン</a> <a href="">ボタン</a> </div> ---------------------------------------------- CSS ---------------------------------------------- /* その1 */ #ib-and-tc{ text-align:center; } #ib-and-tc div{ display:inline-block; margin:10px; background:#666; } #ib-and-tc a{ display:table-cell; vertical-align:middle; height:100px; width:100px; } #ib-and-tc a:hover{ background:#999; } /* その2 */ #table{ display:table; border-collapse: separate; border-spacing: 20px; margin:auto; } #table a{ display:table-cell; vertical-align:middle; width:100px; height:100px; background:#666; } #table a:hover{ background:#999; }