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

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

WBOY
WBOYOriginal
2016-06-24 12:11:571293Durchsuche

在写一个博客界面
本来用不用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了
谢了

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn