Question

CSS设置div中的input标签在垂直方向居中，在IE浏览器中显示

<div class="search" style="font-size: 12px;text-align: center;vertical-align: middle;">
<input type="text" name="q" class="searcht" style="background-image: url('images/4.jpg');font-size: 18px;"/>
<input type="submit" class="searchb" value="搜索"/>
</div>

为什么这样设置之后div中的两个标签在垂直方向不居中呢，
发现标签更靠近顶部

我开始设了第二个标签的行高，第一个标签的位置往下移动了，但是那个submit还是紧靠顶端，而且让我困惑的是为什么设置第二个标签的height会影响到第一个标签在垂直方向的位置呢，求大神指教，如表述有问题，可QQ：907600323；急急急急急急！！！！

Answer 1

A设置了vertical-align: middle意味着当前元素需要一个参照物B，相对于这个B来确定是居上居下或者居中，你不是已经看到了么？AB是同辈元素，且必须inline-bock元素。根据这些规则可以确定一个通用写法：

<div class="search" style="font-size: 12px;text-align: center;height:30px">
<input type="text" name="q" class="searcht" style="background-image: url('images/4.jpg');font-size: 18px;vertical-align:middle;"/><input type="submit" class="searchb" style='vertical-align:middle;' value="搜索"/><i style='vertical-align:middle;display:inline-block;height:100%;width:0;overflow:hidden'></i>
</div>

追问

帅哥能简单解释一下父元素基线的问题吗，好比div的基线在哪，因为看到有人说设置元素的line-height和他的高度相同，这个元素就能垂直居中显示，而我理解的line-height就是行间距，这和垂直居中显示有什么关系

Answer 2

css样式中的vertical-align:middle;属性只适用于内联元素。同时浏览器对其支持还存在局限。第一个input可以通过行高来控制垂直居中，第二个input可以通过边距垂直居中

Answer 3

div的垂直居中就是个悲剧，建议用表格，或是用js控制一下，纯css不行

Answer 4

把input的line-height设置为它的高度试一下呢？