使用这个方法有个前提:用户头像的宽或者高最大不能超过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>
<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>
效果图:
这个方法的好处是用几乎最少的代码实现了不规则头像的纵向居中。