有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一行就会垂直居中对齐了。
<!DOCTYPE html>
<html>
<head>
<title>让同一行内的图片和文字垂直居中对齐</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-size: 9pt;
}
#buttons * {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="buttons">
<img src="reg.gif">
<img src="login.gif">
<a href="#">找回密码</a>
</div>
上边的图片、文字是不是都垂直对齐了呢?
</body>
</html>