CSS实现单行图片文字垂直居中
在 Web 前端开发过程中，有时会遇到单行图片与文字垂直居中的情况，以前可以用 “<img src=" " align="absmiddle">文字”来实现对齐， 但 W3C 标准不支持，所以只能用新的形式。其实新的形式也很简单，只需在 CSS 中设置 img 的 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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现单行图片文字垂直居中</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
.content{width:700px; margin:0 auto;}
.content_list{border:1px solid #ccc; list-style-type:none;}
.content_list li img{vertical-align:middle;}
</style>
</head>
<body>
<div class="content">
<ul class="content_list">
<li><img src="/a/g.jpg" alt="CSS实现单行图片文字垂直居中" /> CSS实现单行图片文字直居中</li>
</ul>
</div>
</body>
</html>
以上示例在IE6、IE7、IE8和火狐均测试通过。
-
相关阅读