CSS实现同一行的图片和文字垂直居中对齐的方法

风君子前端 0

有些朋友会发现，如果一行内容中有图片有文字的话，文字往往会自动的底部对齐，影响美观，那如何让它们相对于垂直居中呢，很简单，就是在图片和文字所在的行中添加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>