[英]Using CSS, how do I vertically align this icon and text even when the font size changes?
我有兩個DIV。 它們每個包含一個具有相同16x16背景圖像的SPAN和另一個具有相同文本的SPAN。 唯一的區別是字體大小。 即使字體大小不同,如何垂直對齊圖標和文本的中心?
我基本上想要一個帶有圖標和文本的元素,無論字體大小如何,該元素都可以垂直對齊。 如果有比我使用的跨度更好的方法,那也很好。
這是一個jsfiddle: https ://jsfiddle.net/nup2pwqz/
<div class='divcontainer'>
<span class='span1'> <span>
<span class='span2 font1'>Header<span>
</div>
<div class='divcontainer'>
<span class='span1'> <span>
<span class='span2 font2'>Header<span>
</div>
.font1{
font-size: 12px;
}
.font2{
font-size: 18px;
}
.divcontainer{
display:inline-block;
position:relative;
text-align:center;
width:200px;
border:1px solid red;
}
.span1{
display:inline-block;
vertical-align:middle;
width:16px;
height:16px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat;
}
.span2{
padding-left:20px;
}
例子1
.divcontainer{ display: inline-block; position: relative; text-align: center; width: 200px; border: 1px solid red; } .divcontainer span{ padding-left: 20px; position: relative; } .divcontainer span:before{ content: ''; position: absolute; top: 50%; left: 0; width:16px; height:16px; background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat; margin-top: -8px; } .font1{font-size: 12px;} .font2{font-size: 18px;} .font3{font-size: 28px;} .font4{font-size: 48px;}
<div class='divcontainer'> <span class='font1'>Header</span> </div> <div class='divcontainer'> <span class='font2'>Header</span> </div> <div class='divcontainer'> <span class='font3'>Header</span> </div> <div class='divcontainer'> <span class='font4'>Header</span> </div>
例子2
.divcontainer{ display: inline-block; position: relative; text-align: center; width: 200px; border: 1px solid red; } .divcontainer > span{ display:inline-block; vertical-align:middle; } .span1{ width:16px; height:16px; background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center center; } .span2{ padding-left:5px; } .font1{font-size: 12px;} .font2{font-size: 18px;} .font3{font-size: 28px;} .font4{font-size: 38px;}
<div class='divcontainer'> <span class='span1'></span> <span class='span2 font1'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font2'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font3'>Header</span> </div> <div class='divcontainer'> <span class='span1'></span> <span class='span2 font4'>Header</span> </div>
使用line-height
。 將以下內容添加到.divcontainer
塊中:
.divcontainer {
line-height: 16px;
}
您可以使用line-height
而不是vertical-align
,如下所示(也需要為background-image-postion
設置值)
.span1{
display:inline-block;
line-height:30px;
width:16px;
height:30px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.