我们一般会使用<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>
回复Comments
作者:
{commentrecontent}