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


在一个容器里再定义一个绝对定位的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不认识

 

本文作者:



相关阅读:
认识Linux下的密码“暴破”软件
比较精简的Javascript拖动效果函数代码
MYSQL 6.0的新特点预览
JavaScript窗口功能指南之在窗口中书写内容
mysql使用指南
Linux系统下防范黑客的一些实用技巧
有一个表里面有某个字段出现重复记录,怎样保留重复记录中的第一条记录
操作Dom中的子元素与兄弟元素的代码
解决Windows Vista系统安装时识别不到硬盘问题
实现SQL Server故障转移群集
用VBS模拟二叉树,可以得到一个排序办法.
jQuery1.6 使用方法一
PHP性能优化 产生高度优化代码
在asp.net中使用session常见问题集锦上
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4