css中文字与图片对齐

css中文字与图片对齐

第一种，使用vertical-align:middle

.icon{
	background-repeat:no-repeat;
	background-position:center;
    display:inline-block;
    width:16px;
    height:16px;
    vertical-align:middle;
}
.icon-down{
    background-image:url(./imgs/icon-chevron-down.png);
}
.icon-up{
    background-image:url(./imgs/icon-chevron-up.png);
}

第二种，vertical-align:baseline + 容器与图片高度一致

/* div{
    line-height:32px;
}       */
.icon{
    background-repeat:no-repeat;
    background-position:center;
    display:inline-block;
    width:32px;
    height:32px;
    /* white-space:nowrap;
    text-indent:-999em; */
}
.icon-position{
    background-image:url(./imgs/icon-position.png);
}
.icon-position{
    background-image:url(./imgs/icon-position.png);
}

第三种，容器vertical-align:top + 图片position:absolute

.icon-delete{
    background:url(./imgs/delete.png) no-repeat center;
    display:inline-block;
    width:16px;height:16px;
}

position:absolute会将元素块状化，相当于display:block，所以之前的display:inline-block是多余的，可以删除