jblzg的技术园

关注基于.Net的Web解决方案,高性能数据库设计,高性能Web服务解决方案,关注移动开发

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

使用这个方法有个前提:用户头像的宽或者高最大不能超过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><href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
        
<li><span><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><href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
        
<li><span><href="#" title="Photo" style="background-image: url(http://hd28.xiaonei.com/photos/hd28/20080804/00/51/tiny_8428e107.jpg);"></a></span></li>
        
<li><span><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>

 

效果图:

这个方法的好处是用几乎最少的代码实现了不规则头像的纵向居中。


posted on 2009-03-03 17:42  jblzg  阅读(1243)  评论(0编辑  收藏  举报