New self-study, recently encountered a problem, sometimes line-height can not achieve the center.
other methods can be used here, but I want to find out why line-height cannot be used.
if line-height is added here, only the content of the a tag will be centered vertically
html
<div class="topbar-search">
<input type="text" id="search">
<a href="-sharp"></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;}
effect:
