您的位置：首页 > 编程语言

宽高比例不固定的用户头像纵向居中的方法（不使用表格、代码精简、图片不变形）

2009-03-03 17:42 751 查看
使用这个方法有个前提：用户头像的宽或者高最大不能超过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>

效果图：



这个方法的好处是用几乎最少的代码实现了不规则头像的纵向居中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航