实现任意图片垂直居中的三种方法
来源:互联网 发布:udid制作代理后台源码 编辑:程序博客网 时间:2024/06/05 10:58
在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。
方法一:
将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
代码如下:
<style type="text/css">body {
height:100%;
}
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">?
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
方法二:
标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
代码如下:
<style type="text/css">body {
height:100%;
}
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">?
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
<body>
<div id="box">
<i></i><img src="images/demo_zl.png" alt="" />
</div>
</body>
方法三:
在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现居中,另外,对于IE6/IE7使用了CSS表达式来实现兼容。
代码如下:
<style type="text/css">body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高等于高度 */
}
/* 兼容标准浏览器 */
#box p:before{
content:"."; /* 具体的值与垂直居中无关,尽可能的节省字符 */
margin-left:-5px; font-size:10px; /* 修复居中的小BUG */
visibility:hidden; /*设置成隐藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
0 0
- 实现任意图片垂直居中的三种方法
- 实现任意图片垂直居中的三种方法
- 实现任意图片(高度不确定)垂直居中的三种方法
- 未知宽高图片垂直居中的三种方法
- 实现图片垂直居中的方法
- 三种版本的图片垂直居中
- 图片垂直居中的几种方法
- 图片垂直居中的方法
- 垂直居中的两种实现方法
- 垂直居中的几种实现方法
- 垂直居中的几种实现方法
- 实现垂直居中的几种方法
- 使图片垂直&水平居中的CSS实现方法
- 元素的水平及垂直居中实现方法二三
- 解决未知大小图片在已知容器中垂直居中的三种方法
- web页面开发过程中让图片垂直居中的三种方法
- css水平垂直居中三种实现方法
- 三种方法实现垂直水平居中详解
- CSS font-family的使用
- svn安装
- Linux内核高端内存
- oracle数据库的自动导出导入
- org.apache.ibatis.type.TypeException: Could not resolve type alias异常
- 实现任意图片垂直居中的三种方法
- 彩色石子 问题的C++解法
- XCode工程内多Targets教程
- 让windows8 变成无线路由器的方法
- Oracle日常性能查看
- 修改文件目录权限
- Delphi DES加密解密单元
- shell 脚本 面试题
- sqlite3 的增删查找