查看: 1716|回复: 9
打印 上一主题 下一主题

[经验分享] 图片在DIV中上下左右都居中的CSS效果

[复制链接]
   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

跳转到指定楼层
楼主
发表于 2011-12-30 19:32:25 |只看该作者 |倒序浏览
连续发表了两篇关于水平和上下居中的文章,大家可以通过本文尾部的上一篇来查看前边的文章,不说费话,烈火将又一款居中代码展示出来。
  演示:
<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





分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2012-1-6 20:13:05 |只看该作者
回复

使用道具 举报

   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

板凳
发表于 2012-2-15 23:23:55 |只看该作者
人过留名!
回复

使用道具 举报

462

主题

1

听众

31万

积分

首席设计师

Rank: 8Rank: 8

纳金币
2
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

地板
发表于 2012-2-22 23:25:40 |只看该作者
读铁系缘分,顶铁系友情
回复

使用道具 举报

1023

主题

3

听众

359

积分

设计实习生

Rank: 2

纳金币
335582
精华
0

最佳新人

5#
发表于 2012-3-9 23:26:08 |只看该作者
楼主收集的可真全哦
回复

使用道具 举报

   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

6#
发表于 2012-3-18 23:21:07 |只看该作者
很经典,很实用,学习了!
回复

使用道具 举报

1023

主题

3

听众

359

积分

设计实习生

Rank: 2

纳金币
335582
精华
0

最佳新人

7#
发表于 2012-3-30 23:19:07 |只看该作者
很有心,部分已收录自用,谢谢
回复

使用道具 举报

462

主题

1

听众

31万

积分

首席设计师

Rank: 8Rank: 8

纳金币
2
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

8#
发表于 2012-4-25 23:27:12 |只看该作者
楼主收集的可真全哦
回复

使用道具 举报

   

671

主题

1

听众

3247

积分

中级设计师

Rank: 5Rank: 5

纳金币
324742
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

9#
发表于 2012-7-1 23:25:04 |只看该作者
我就看看,我不说话
回复

使用道具 举报

1023

主题

3

听众

359

积分

设计实习生

Rank: 2

纳金币
335582
精华
0

最佳新人

10#
发表于 2013-1-25 23:19:46 |只看该作者
响应天帅号召,顶
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-17 21:17 , Processed in 0.252167 second(s), 28 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部