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; と指定。

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

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/203

Comments