-
ID:g2auA2 さんの質問

CSSのみで横並びグローバルナビを作成する際、ul > li > a という要素の構成で、ulにtable、liにtable-cell、aにblockを設定するとなると、aのテキストにvertical-align:middleは当たり前ですが効きません。
皆さんは横並びグローバルナビでリンクのテキストを上下中央寄せにしたい場合にどのようにコーディングされますでしょうか?
a内のテキストが、1行でも2行でも上下中央寄せにしたいです。

みんなの回答 3 件

ID:JFmLcg さんの回答

Aの中にtableとか。

ID:g2auA2

ul > li > a(table) > span(table-cell) でやってみたところ近いようにはなったのですが、tableは高さを親のセルにフィットしてくれいようです・・・

ID:uYd0Go さんの回答

IE8無視で良ければこんなんどう?

Codepen

http://codepen.io/anon/pen/yyKBEZ
ID:AShgh7

トピ主です。惜しい感じです。1行のaの判定が文字の部分しか無いようです。。。

ID:eADhL5 さんの回答

ulの外にdiv追加していいなら

【IE8以上】CSSだけで高さを合わせる - js do it

http://jsrun.it/Ituki/1Tbz
ID:AShgh7

なるほど・・・こんな手が・・・
aはdisplay:inline-blockでも良さそうですね。
パディングでクリックできるようにするなんて思いつきませんでした。

ID:uYd0Go

上のCodepen置いたもんだけど、なるほどー。勉強になるわー

ID:L4jbeH

このやり方でも結局、文字が過度の複数行になると、a範囲が反応しなくなるよね

最終更新日:2015-02-17 (4,921 views)

関連するトピックス

ページ上部に戻る