毅窝疯

iconfont 与文字垂直居中问题

By hybnx 2018-08-28 CSS 来源:本站 访问:713

iconfont字体理论上设置行高可以解决居中问题,前提是在一定的大小情况下。

如果给icon设置了其他大小,图标会偏上或偏下,解决方法如下:

分别给图标和图标意外的内容用标签包围,然后分别设置垂直居中,并把icon设置display:inline-block;

 

代码如下:

html:

<span class="aligned">文字</span><span class="icon aligned"></span>

 

css:

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #aaa;
    border: solid 1px #000;
}
.aligned {
    vertical-align: middle;
}