纳金网

标题: 图片在DIV中上下左右都居中的CSS效果 [打印本页]

作者: 奇 时间: 2011-12-30 19:32
标题: 图片在DIV中上下左右都居中的CSS效果
连续发表了两篇关于水平和上下居中的文章，大家可以通过本文尾部的上一篇来查看前边的文章，不说费话，烈火将又一款居中代码展示出来。
　　演示：
<html>

<head>

<style type="text/css">

<!--

* {margin:0;padding:0}

div {

width:500px;

height:500px;

border:1px solid #666;

overflow:hidden;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle

}

div p {

position:static;

+position:absolute;

top:50%

}

img {

position:static;

+position:relative;

top:-50%;

left:-50%;

}/* 烈火学院 http://www.veryhuo.com */

</style>

</head>

<body>

    <div>

       <p><img src="http://www.veryhuo.com/images/logo.gif" /></p>

    </div>

</body>

</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/26419.html

作者: 奇 时间: 2012-1-6 20:13

作者: 奇 时间: 2012-2-15 23:23
人过留名!

作者: 菜刀吻电线 时间: 2012-2-22 23:25
读铁系缘分，顶铁系友情

作者: 晃晃 时间: 2012-3-9 23:26
楼主收集的可真全哦

作者: 奇 时间: 2012-3-18 23:21
很经典，很实用，学习了!

作者: 晃晃 时间: 2012-3-30 23:19
很有心,部分已收录自用,谢谢

作者: 菜刀吻电线 时间: 2012-4-25 23:27
楼主收集的可真全哦

作者: 奇 时间: 2012-7-1 23:25
我就看看，我不说话

作者: 晃晃 时间: 2013-1-25 23:19
响应天帅号召，顶

欢迎光临纳金网 (http://old.narkii.com/club/)