使图片、文字垂直居中对齐

      css 2009-3-2 4:13

我们一般会使用<img>标记的align属性使其周围的文字按某种方式对齐,
但是align是外观属性,在Web标准盛行的今天,这个属性已经是不推荐使用了。

要在同一行放按钮和链接,其中按钮是图片、链接是文字链接,文字链接要在这一行里面居中对齐。
我写出来的HTML结构是这样的:

<div id="buttons">
    <img src="ZR04.gif" alt="登录" />
    <img src="ZR05.gif" alt="注册" />
    <a href="#">忘记密码</a>
</div>

但是默认的情况下,文字是底部对齐的。

要使文字垂直居中对齐的方法其实很简单,就是给所有内联元素加垂直对齐样式:

#buttons *{
    vertical-align:middle;
}

完整测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 body{
   font-size:12px;
 }
 #buttons *{
 vertical-align:middle;
 }
 </style>
</head>
<body>

<div id="buttons">
    <img src="ZR04.gif" alt="登录" />
    <img src="ZR05.gif" alt="注册" />
    <a href="#">忘记密码</a>
</div>

</body>
</html>

标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}