使用这个方法有个前提：用户头像的宽或者高最大不能超过x（x = 图片容器宽度 - 图片与容器的边距），这里的例子是参考了校内网首页右侧最近来访的思路：
<!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>
<style type="text/css">
#PhotoList { list-style: none; padding: 0; margin: 0; }
#PhotoList li { float: left; width: 80px; height: 80px; padding: 5px; }
#PhotoList li span { display: block; width: 55px; height: 55px; padding: 4px 0 0 4px; border: solid 1px #ccc; }
#PhotoList li span a { display: block; width: 50px; height: 50px; background-position: center center; background-repeat: no-repeat; }
</style>
</head>
<body>
<h1>照片纵向对齐示例</h1>
<ul id="PhotoList">
<li><span><a href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
<li><span><a href="#" title="Photo" style="background-image: url(http://hdn601.xnimg.cn/photos/hdn601/20081216/22/30/tiny_WVti_9278a200150.jpg);"></a></span></li>
<li><span><a href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
<li><span><a href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
<li><span><a href="#" title="Photo" style="background-image: url(http://hdn601.xnimg.cn/photos/hdn601/20081216/22/30/tiny_WVti_9278a200150.jpg);"></a></span></li>
</ul>
</body>
</html>
效果图：
这个方法的好处是用几乎最少的代码实现了不规则头像的纵向居中。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。