>  기사  >  웹 프론트엔드  >  使用css sprites怎么才能使图标与文字垂直居中显示_html/css_WEB-ITnose

使用css sprites怎么才能使图标与文字垂直居中显示_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 12:11:571291검색

在写一个博客界面
本来用不用css sprites都没什么问题 小网站嘛
不过没用过sprites 今天就写了一下
但是之前没使用sprites 直接插入图标图片和文字之后 用height与line-height同样高度就可以垂直居中
用了sprites之后因为插入的是背景 垂直居中就不好控制了
不知道大家有什么好的方法 推荐一下


回复讨论(解决方案)

楼主?的容器垂直居中
还是 
background:url(...) center;
这样?

HTML:

Blog Search


CSS:
.iconA {display:inline-block; height:16px; width:16px; background:url(icons.png) -20px -20px no-repeat}

可以让图标和文字显示在同一行 图标不会偏上一点

iconA
加上
vertical-align:middle;
试试

解决了
vertical-align:middle;还是会错位一点
用margin-bottom 给一个负值调整一下就OK了
谢了

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.