商讯信箱
用户名: @
密  码:   注册|忘记密码
登录
个人用户经销商
信箱 E杂志
您的位置:首页 > 学院 > 正文            Adobe Dreamweaver CS3 9.0 for Windows      报价 | 参数 | 图片 | 论坛 | 评测

CSS让未知高宽的图片实现垂直居中!

作者:网络 佚名  2008-07-14   

    【IT168 论坛采风】在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。

相关精彩文章

五分钟快速制作CSS导航菜单
利用CSS层叠(cascade)处理样式冲突

    直接上CSS代码: 

#pic {
    width:300px;
    height:300px;
    background-color:green;
    border:6px solid #ccc;
    text-align:center;
    position:relative;
    display:table-cell;
    vertical-align:middle;
}
#pic p {
    *position:absolute;
    top:50%;
    left:50%;
}
#pic p img {
    *position:relative;
    top:-50%;
    left:-50%;
}

    #pic是容器,里面放一个p容器,该容器采用绝对定位,最后插入图片,图片采用相对定位。

    这里用到了一个hack,*只有IE浏览器可以识别,Firefox不认识。

更多热点:Dreamweaver8 开发ASP动态网站   Office2007系列视频教程   DIV+CSS网页布局详解

【内容导航】
第1页:CSS让未知高宽的图片实现垂直居中!
©版权所有。未经许可,不得转载。
[责任编辑:杜涛] [我要挑错]
相关产品
Adobe Dreamweaver CS3 9.0 for Windows
参考报价:1750元
推荐比例:0%0%
关注指数:0    
网友评论:请您发表评论
使用手册:查看全部手册
厂商资料:Adobe
促销产品推荐
·笔记本促销
·台式机促销
·数码相机促销
·手机促销
·服务器促销