导航中的垂直对齐li元素

时间:2011-04-01 10:01:13

标签: css navigation

我在垂直ul

中有链接

其中一些很小(例如:Home)并且只在一条线上。然而,有些是两行(例如:注册我们 - 包裹到下一行)。

有没有办法让所有这些文字在ul?

中垂直对齐

我的UL有75px的固定高度,内部的li(浮动:左侧使其垂直)。

li里面的a是display: block,也有高度和宽度。

任何帮助都会非常棒,谢谢你,我无法在任何地方找到如何做到这一点。

由于

3 个答案:

答案 0 :(得分:3)

我的猜测是,你有li分钟浮动,将列表更改为使用display:inline-block;代替浮动应该可以让你获得垂直对齐..

这可能不是直接交换,它可能需要一两个调整才能看起来与你拥有的一样,但是看到你的代码会帮助我们帮助你;)

抱歉,我的错误实际上是display: table-cell;这是现代浏览器的答案,但是这在IE7及以下版本中无效。

我确信我已经使用inline-block为IE做了这个但是我在我的档案中找不到它..我现在要出去了,所以现在让你留下Chris Coyiers写的,其中列出了几个不同的如果您需要IE7支持,IE会在底部黑客攻击:Vertically Center Multi-Lined Text

答案 1 :(得分:0)

对此有更多的黑客攻击,我不知道所有浏览器的工作。 如果您使用的是css3,则可以使用灵活的框布局:http://blog.isotoma.com/2010/08/css3-flexbox/ 如果不是,您可以使用'table'hack:http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

答案 2 :(得分:0)

这可能会为您提供一个额外的想法,即如何根据您的情况垂直对齐事物,http://blog.themeforest.net/tutorials/vertical-centering-with-css/并且它会针对每种方法提出货物和坏处。

GL

相关问题