如何让图标垂直居中

在网站设计中，为了让一个文本标题更加醒目，或者让一个列表更加美观，我们常常会在文本前加上一个小图标。例如，少儿上网导航的首页，我在标题“请选择频道进入”前就加入一个GO的图标。是不是觉得挺漂亮的？本文要介绍的是如果让在文本前加入图标，并且让图标垂直居中。

在文本前加小图标的方法有两种：一种是直接用<img>标签，另外一种是使用CSS背景属性。

1. <img>标签

HTML的<img>标签，提供align的属性，但是这种属性已经被弃用(deprecated)。另外根据我的经验，img标签的align属性在IE和Firefox下的显示是不同的，使用它很难让图标垂直居中。比较标准的方法应该是通过CSS来定义img的样式属性 - vertical-align (元素的垂直排列)。

vertical-align可能的值和描述如下：

1. baseline
   默认。元素放置在父元素的基线上。
2. sub
   垂直对齐文本的下标。
3. super
   垂直对齐文本的上标
4. top
   把元素的顶端与行中最高元素的顶端对齐
5. text-top
   把元素的顶端与父元素字体的顶端对齐
6. middle
   把此元素放置在父元素的中部。
7. bottom
   把元素的顶端与行中最低的元素的顶端对齐。
8. text-bottom
   把元素的底端与父元素字体的底端对齐。

通常使用middle就可以让图标和文本水平对齐，但是这和图标的大小、文本的字体大小(font-size))、以及元素的行高(line-height)等都有关系。建议把行高设成和图标的高相同，然后把字体大小设成比行高小2个px。另外还可以根据实际情况调整图标或者文本的上下padding。例如：

<p class="v1">
  <img id="myimg" src="/images/go.gif" border="0" />&nbsp;请选择频道进入
</p>
<!--CSS样式如下：-->
<style type="text/css">
  #myimg{
    height:24px;
    vertical-align:text-bottom;
  }
  .v1 {
    line-height:24px;
    font-size:22px;
  }
</style>

2. 使用CSS背景属性

使用CSS背景属性应该算是最标准的方法，使用它我们可以给文本标题加上特色图标。这种方法在给文本列表加上图标时尤其常用。当然我们还是要注意行高、图标尺寸和字体大小等因素，前面的建议在这种方法里依然适用。例如：

<style type="text/css">  
  .v2 {
    font-size: 22px; 
    line-height:24px; 
    color: #6B9905; 
    margin:0; 
    padding:15px 0px 15px 30px; 
    text-align:left;
    background: url(../images/go.gif) no-repeat 0px 15px;
  }
</style>
<p class="v2">请选择频道进入</p>

这里的难点是：background: url(../images/go.gif) no-repeat 0px 15px; 0px/15px指的是图标的横/纵坐标，横坐标为0代表在父元素区间的最左边，纵坐标为15px代表图标从父元素区间的顶部向下移动15px (因为文本的上方padding是15px，所以采用下移15px就可以和文本对齐)。注：关于背景元素，我在以前的文章里有比较详细的介绍。

演示和代码