新しい技術とか古い技術とか関係なく今のhtmlを考える。

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;
}