两行CSS代码解决DIV内图片居上文字居下的效果

工作中的实际需求:相片列表显示,要求图片在上面,文字在下面,因为图片的高度不固定,出于美观的考虑,图片上对齐,文字下对齐比较好看。所以有了这些代码。

CSS代码:

<style type="text/css">
.dr_photo{width:25%;float:left;height:230px;border:1px solid #ACACAC; background:#f0F0F0;margin:10 30px; padding:2px;position:relative;text-align:center;
   }
.dr_photo .txt{width:100%;text-align:center;position:absolute;bottom:2px;padding:0px;display:block;left:0px;font-weight:bold;
   }
</style>

注意:图不要与文字放在同一DIV里,所以图是上对齐的。类TXT是显示文字的,其中left:0px对在IE 6里的下居中对齐显示起了关键性的作用,不然文字不能正确显示在dr_photo层里。


HTML代码:

<div class=dr_photo>
<a href='http://www.kqyx.cn/cl.asp?id=1842&exp_id=159&act=81' target=_self ><img src='http://www.kqyx.cn/upload/upfile/photo/2008/10/2008102123465437435_159.jpg' width=160 style='float:center'></a><br>
<div class=txt>
<a href=http://www.kqyx.cn/cl.asp?id=1842&exp_id=159&act=81>邓婷婷 Tina</a>
</div>
</div>

<div class=dr_photo>
<a href='cl.asp?id=1842&exp_id=158&act=81' target=_self ><img src='http://www.kqyx.cn/upload/upfile/photo/2008/10/200810212375620677_158.jpg' width=160 style='float:center'></a><br>
<div class=txt>
<a href=http://www.kqyx.cn/cl.asp?id=1842&exp_id=158&act=81>吴腾波 Jack</a>
</div>
</div>

<div class=dr_photo><a href='http://www.kqyx.cn/cl.asp?id=1842&exp_id=157&act=81' target=_self ><img src='http://www.kqyx.cn/upload/upfile/photo/2008/10/200810212345979179_157.jpg' width=160 style='float:center'></a><br><div class=txt><a href=http://www.kqyx.cn/cl.asp?id=1842&exp_id=157&act=81>周亮 Kevin</a>
</div>
</div>

<div class=dr_photo>
<a href='http://www.kqyx.cn/cl.asp?id=1842&exp_id=156&act=81' target=_self ><img src='http://www.kqyx.cn/upload/upfile/photo/2008/10/200810212247340293_156.jpg' width=160 style='float:center'></a><br><div class=txt><a href=http://www.kqyx.cn/cl.asp?id=1842&exp_id=156&act=81>佘东育 Daniel</a>
</div>
</div>
</div>


效果如下图:



注意:如果在DIV里要使img元素居中,可能要用“<img src=''  style='float:center'>”和DIV里用“text-align:center”同时才能实现。


[本日志由 ancher 于 2015-06-17 06:37 PM 更新]
上一篇: 关于CSS标准的教训
下一篇: 关于a、span标签间超链接光标问题的困惑
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: DIV底部下对齐 DIV 布局 CSS 居中
相关日志:
评论: 1 | 引用: 0 | 查看次数: 11197
林肆[2012-04-21 07:26 PM | 访问 http://www.lsnote.com | | 111.180.96.202 | del | 回复回复]
沙发
这个东西可以收藏一下,蛮好!咱们先友情,后链接吧,常来常往!
发表评论
你没有权限发表评论!