在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ css: 想用line-height 實現(xiàn)垂直居中無效

css: 想用line-height 實現(xiàn)垂直居中無效

萌新自學,最近碰到個問題,有時候line-height無法實現(xiàn)居中.
這里其實可以用別的方法,但是我想找出不能用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;

}

效果圖:
圖片描述

回答
編輯回答
獨特范

一：
你在文本框前面加幾個字就居中了。。。。(頑固bug)

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

二：
或者利用margin-top 自己計算距離來實現(xiàn)效果

2017年7月2日 02:37
編輯回答
筱饞貓

哪里加line-height?

line-height也受父級的css屬性影像，某些特定類型元素表現(xiàn)方式也不一樣
參看：http://www.zhangxinxu.com/wor...

2018年1月15日 03:17
編輯回答
若相惜

感覺和vertical-align有關

2018年8月26日 02:20
編輯回答
祈歡

這種居中感覺加 vertical-align:middle

2018年3月24日 06:24