table で、テキストをセル内の縦のセンターに配置する時は vertical-align: middle; で簡単にできるのですが、例えば、ナビゲーションで 3em の高さのメニューがあったとして、CSS で文字をボックス内の縦のセンターに配置しようして vertical-align: middle; を指定しても実現出来ません。vertical-align の適用対象は、行内レベル要素及び'table-cell'要素
だからです。
#menu li {
display: block;
width: 8em;
height: 3em;
float:left;
list-style-type: none;
text-align: center;
background-color: #eeeeee;
border: 1px solid #ccc;
vertical-align: middle;
}- 失敗サンプル（vertical-align: middle;を指定）
センター配置させる方法を前にチョロッと紹介したかもしれませんが、ちゃんと説明。方法は、ボックスの高さと同じ数値を line-height に指定すればオーケー。サンプルのメニューの高さは 3em なので line-height:3em; と指定。
- 成功サンプル（line-height: 3em;を指定）
地味ですが、知っておくと意外に使える技だったりします。
Comments