logo 广告
Loading...
 导航 所在位置:论坛首页 -> ┈┋电脑网络┋┈ -> 网页制作技术 -> CSS使未知高宽的图片实现垂直居中
回复
标题:CSS使未知高宽的图片实现垂直居中收藏 编辑 删除 楼主 | 上一篇 下一篇
henzaihuni
头像
等级:职业侠客
权限:普通用户
积分:50
金钱:349
声望:72
经验:72
发帖数:122
注册:2008年3月19日
资料 短消息2008-8-25 10:32:12

在一个容器里再定义一个绝对定位的p容器,再在p容器里放需要垂直居中的图片,图片定义相对定位的CSS。

直接上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不认识

签名

2008-8-25 10:32:12 顶部
第1页 共页 共0个回复     <<    >>    
 快速回复
  • 支持UBB,HTML标签

  • 高级回复

  • 操作选项:评分 加精 解精 奖惩 设专题 设公告 解公告 固顶 总固顶 解固顶 结帖 解结帖 锁帖 解锁 移帖 删帖
      首页 | 购买指南 | 虚拟主机 | 特色介绍 | 下载中心 | 支付方式
    Copyright 2004-2008 BBSGood.com Powered By: BBSGood.Speed Version 5.0
      咨询电话:0575-85513832、0575-85513825(传真)、7*24小时咨询服务:13606552007 不良信息举报中心 浙ICP备05029817号
      业务QQ:38958768、客服QQ1:415896239、客服QQ2:343896043、MSN:jccsxx@hotmail.com