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

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

 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注