将div中的标签+下拉列表居中

时间:2011-04-11 14:17:03

标签: html css

我有以下html:

div,包含该标签的标签和下拉列表(选择)。在标签和下拉列表上放置一个vertical-align:center,结果是标签居中,但下拉列表不居中。我认为其中心是“下拉列表上方和下方的等间距”。 IE显然认为中心的是将下拉列表的底部与标签的底部对齐,遗憾的是,这看起来并不是很好。我该如何解决这个问题?

编辑:因为位置相对而不紧急;很容易解决问题,但使用position:relative;让我烦恼,不应该是必要的。

2 个答案:

答案 0 :(得分:2)

垂直居中是一种pain in the butt ......

在坚果壳中,您需要使用top:50%为元素赋予绝对位置。由{em>包含元素的高度来衡量top。这将把元件半件的顶部放在容器下面。然后你给它一个负的上边距,该元素是中心高度的一半。

答案 1 :(得分:2)

你基本上错过了vertical-align属性。它只能在表格单元格中使用。不是在div上。它也是垂直对齐:中间;不是中心。

  

vertical-align:middle:将元素的垂直中点与。对齐   父元素的基线   加上父母的x高度的一半。

我认为这篇文章清楚地解释了为什么:http://www.ibloomstudios.com/articles/vertical-align_misuse/

关键是baseline,因为这是元素对齐的点。

示例:http://jsfiddle.net/easwee/kabBF/7/