css 标题文字前面加小图标，如何使它们不错位？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 标题文字前面加小图标，如何使它们不错位？相关的知识，希望对你有一定的参考价值。
我现在标题文字全部使用的<h3>
----------------------------------------------------------------
h3的样式为：font-size: 14px; font-weight: bold; text-align: left; margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0;
----------------------------------------------------------------
放置<h3>的div是menubar样式为：height: 30px; padding-left: 10px; line-height: 30px;
----------------------------------------------------------------
然后我在标题的前面需要插一个小图片。可是一插进去发生错位了。
我的代码是
<div class="menubar">
<h3><img scr="123.jpg" /><a hrer="#">菜单标题</a></h3>
</div>
我本来在之前没有加img的时候文字显示是正常居中。
插了图片之后。在FIREFOX却还是正常显示的。。
但是在IE里面浏览就发现文字跟图片都不居中了。顶上了。都顶上了。我设置的lineheight:30px完全不管用了。我郁闷。
这是啥问题呢？- -。。要怎么解决呢？我不想用margin或者padding。。觉得很麻烦。
不知道这是啥道理呀。
-
--------------------------------------------------------------------------------------
-
不行呀。把图片当成H3的背景是好的。可是我这个h3要用到很多地方。而且不一定都加这个小图标的。现在我的这类菜单统统使用h3。。可是前面的小图片就不固定了呀。T_T
还有一个问题就是很奇怪。。这个图片绝对居中。偶有的时候用有效。。有的时候用就没效了。。 - -
现在这个图片居中我也用了。。完全没用。。居然还错位到h3的下面去了。>_<
为什么在IE浏览器看到的设的lineheight文字高度都会偏上呢。。在火狐又很正常啊。。- -
-
--------------------------------------------------------------------------------------
一、把小图片当做h3的背景来调即：
.menubar h3font-size: 14px; font-weight: bold; text-align: left; margin:0;background:url(123.jpg) no-repeat left center;padding-left:图片的宽度;；
二、加上<img scr="123.jpg" align="absmiddle" />使图片绝对居中；
推荐第一种情况，如果别的地方还有要使用这个图片的话； 参考技术A 解决办法，就是把图片的位置和标题的位置放在一个样式控制。
示例代码如下：
<div class="menubar">
<h3 class="h3"><a hrer="#" class="one">菜单标题</a></h3>
</div>
.h3background:url(123.jpg) no-repeat 4px 6px;line-height:25px;font-size: 14px; margin:0; 参考技术B 把图片当成h3的背景，给h3加个适当的padding,让小图片能显示出来，然后用背景定位控制吧，这样好弄些。 参考技术C 设为auto .还有两种方法：
一、把小图片当做h3的背景来调即：
.menubar h3font-size: 14px; font-weight: bold; text-align: left; margin:0;background:url(123.jpg) no-repeat left center;padding-left:图片的宽度;；
二、加上<img scr="123.jpg" align="absmiddle" />使图片绝对居中；
推荐第一种情况，如果别的地方还有要使用这个图片的话 参考技术D 有没有代码，这个错位的原因太多了。。。div高度啊，或者div行不兼容（我自己起的名字。。。）
为网站文字前面添加图标 在线调用 Font Awesome 字体图标 美化网站
一、如何开始
1、将下面的代码复制粘贴到HTML页面面的 <head> 下面
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
2、在需要添加图标的文字前面加入如下代码
<i class="fa fa-bars"></i>
根据图标选择的不同，class中的也不同，选择要调用的图标，单击就会有相应的代码。
更多的图标：http://www.fontawesome.com.cn/faicons/#webapp-icons
二、效果，如本站的菜单导航
以上是关于css 标题文字前面加小图标，如何使它们不错位？的主要内容，如果未能解决你的问题，请参考以下文章
为网站文字前面添加图标 在线调用 Font Awesome 字体图标 美化网站
Android PagerSlidingTitleIconTabStrip 能够在title旁边加小图标的PagerSlidingTabStrip