如何讓圖示和文字垂直對齊?大概會讓人直覺想到設置vertical-align:middle吧!
但在「CSS世界」書中提到,middle 指的是基線往上 1/2 x-height 高度,近似字母x交叉點的位置,而這個位置不同字型會略有差異,所以設置vertical-align:middle有時並沒辦法垂直對齊。
*基線:X字母的下邊線
*x-height:字母x的高度
並且建議使用CSS的相對單位之一"ex",實現圖示和文字水平對齊的方法,不限字型、字級都可以完美的水平對齊:
<style>
.icon-arrow {
display: inline-block;
width: 10px;
height: 1ex;
background-image: url(http://t.cn/EhkL2Dp);
background-size: contain;
background-repeat: no-repeat;
}
.sf { font-size: 16px;}
.bf { font-size: 32px;}
</style>
<body>
<span class="sf">向下展開<i class="icon-arrow"></i></span>
<span class=" bf">向下展開<i class="icon-arrow"></i></span>
</body>
参考資料:
vertical-align:middle 效果演示-歪脖网