网站开发日志

2009年2月8日星期日

如何让图标垂直居中

在网站设计中,为了让一个文本标题更加醒目,或者让一个列表更加美观,我们常常会在文本前加上一个小图标。例如,少儿上网导航的首页,我在标题“请选择频道进入”前就加入一个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就可以和文本对齐)。注:关于背景元素,我在以前的文章里有比较详细的介绍。

演示和代码

标签: ,

相关文章:

1 条评论:

发表评论

指向此帖子的链接: