未知高度的图片垂直居中（2）
作者：雨夜带刀 来源：雨夜带刀's Blog 发布时间：2010-12-17 12:36:00
方法二 (XHTML 1.0 transitional)：
方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。
CSS样式部分：
<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50％; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50％;left:-50％; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>
该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。
方法三 (XHTML 1.0 strict)：
标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。
HTML结构部分：
<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>
CSS样式部分：
<style type="text/css">
#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]-->
方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于蓝色理想，暂时只对这3个方法比较满意，兼容性方面不错，使用起来的限制也比较小，还有些方法我也都一一测试过，效果都不理想，在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。
思考：很多方法都是依赖于将外部容器的显示模式设置成table才能实现垂直居中，也就是div来模拟table，如果CSS有一个属性来实现这种效果那该多好。如果你也有好的方法，欢迎你来分享。
0
投稿猜你喜欢
- 本文主要讲python支持zookeeper的接口库安装和使用。zk的python接口库有zkpython，还有kazoo，下面是zkpyt
- 在写一个多线程类的时候调用报错 RuntimeError: thread.__init__() not calledclass Notify
前言前面在 BeanShell 里面是通过 java 脚本实现请求的预处理，jmeter里面也可以调用python的脚本，需安装 jytho- 前言很多时候开发者需要删除文件。可能是他错误地创建了文件，或者不再需要该文件。无论出于何种原因，都有一些方法可以通过Python来删除文件，
- Part.I 预备知识Chap.I 几个概念的区分Python 模块(Module)，是一个 Python 文件，以 .py 结尾，包含了
- 关于cookie和session估计很多程序员面试的时候都会被问到，这两个概念在写web以及爬虫中都会涉及，并且两者可能很多人直接回答也不好
- 我们在.NET程序的开发过程中，常常需要和用户进行信息交互，比如执行某项操作是否成功，“确定”还是“取消”，以及选择“确定”或“取消”后是否
- 在查找数据集的时候发现，并不是所有的数据集都是以csv的格式存储，也就是每一列特征数据的分割并不是都以逗号分割，有的数据格式是以空格为分割例
- 之前在写连表查询的时候，老是分不清楚where和on的区别，导致有时写的SQL会出现一点小的问题，这里专门写篇文章做下记录，如果你也分不清，
- #!/usr/bin/env pythonimport sockets = socket.socket(socket.AF_PACKET,
- github指路作业要求友情提示ldw老师给の友情提示（虽然感觉也还好/dbq其实还挺有用的）课上讲的例子是图片展示器（能够实现打开图片+镜
- 一、数据备份1、使用mysqldump命令备份mysqldump命令将数据库中的数据备份成一个文本文件。表的结构和表中的数据将存储在生成的文
- 如下所示：ljust（len，str）字符向左对齐，用str补齐长度rjust（len，str）字符向右对齐，用str补齐长度rjust（l
- 一、Python 操作 Excel 的常用库小伙伴你好，在开始操作 Excel 之前，你需要安装 Python 和一些相关库。可以使用 pi
- 一：简介由paramiko是用python语言写的一个模块，遵循SSH2协议，支持以加密和认证的方式，进行远程服务器的连接。由于使用的是py
- 本文实例讲述了MYSQL锁表问题的解决方法。分享给大家供大家参考，具体如下：很多时候！一不小心就锁表！这里讲解决锁表终极方法！案例一mysq
- 通过对四则运算的学习，已经初步接触了Python中内容，如果看官是零基础的学习者，可能有点迷惑了。难道在IDE里面敲几个命令，然后看到结果，
- #!/usr/bin/env python# -*- coding:utf-8-*-# file: {NAME}.py# @author:
- 视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心
- 首先打击我的就是rpm安装，它告诉我发现了Mysql版本冲突，安装无法继续。我用rpm -q 查询后，想通过rpm -e 来删除系统自带的版
