css: 想用line-height 实现垂直居中无效

Question

萌新自学,最近碰到个问题,有时候line-height无法实现居中.
这里其实可以用别的方法,但是我想找出不能用line-height的原因.
这里如果加了line-height就只有a标签的内容垂直居中了

html

    <div class="topbar-search">
        <input type="text" id="search">
        <a href="#"></a>
    </div>

css:

.site-topbar .topbar-search{

float: right;
line-height:55px;
width: 315px;
height: 55px;
background: url(img/task09-sprite.png) no-repeat 0px -37px;

}
.site-topbar .topbar-search a{

display: inline-block;
margin-top: 5px;
margin-left: 25px;
width: 16px;
height: 16px;
background: url(img/task09-sprite.png) no-repeat -45px -2px;

}

效果图:

Answer 1

一：
你在文本框前面加几个字就居中了。。。。(顽固bug)

<div class="topbar-search">
`文本框` <input type="text" id="search">
 <a href="#"></a>
 </div>                 //line-height 就可以
 

二：
或者利用margin-top 自己计算距离来实现效果

Answer 2

哪里加line-height?

line-height也受父级的css属性影像，某些特定类型元素表现方式也不一样
参看：http://www.zhangxinxu.com/wor...

Answer 3

感觉和vertical-align有关

Answer 4

这种居中感觉加 vertical-align:middle