個別記事

前後の記事

CSS で垂直センター配置

この記事が属するカテゴリー
CSS

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

センター配置させる方法を前にチョロッと紹介したかもしれませんが、ちゃんと説明。方法は、ボックスの高さと同じ数値を line-height に指定すればオーケー。サンプルのメニューの高さは 3em なので line-height:3em; と指定。

地味ですが、知っておくと意外に使える技だったりします。

2005-03-18T18:26:38+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/186

"CSS で垂直センター配置"へのトラックバックはまだありません。

コメント

"CSS で垂直センター配置"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)