图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

时间：2022-09-03 11:23:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）</title>

<style media="screen" type="text/css">

.boxout{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; float:left;}

.boxin{display:table-cell; vertical-align:middle; text-align:center;}

/*for IE*/

.boxout{*position:relative;}

.boxin{*width:100%;*position:absolute; *top:50%; *left:0;}

.boxout p{*position: relative; *top:-50%; *margin:0; *padding:0;}

.boxout img{ *margin-top:2px;}/*for IE　图片4像素空白bag*/

</style>

</head>

<body>

<div class="boxout">

<div class="boxin"><p><img src="http://hiphotos.baidu.com/howlking/pic/item/ddab4a2328628c4e9822eda5.jpg" /></p></div>

</div>

</body>

图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）的更多相关文章

  1. 图文-水平垂直居中兼容ie6&plus;

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  2. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  3. （转）Css样式兼容IE6&comma;IE7&comma;FIREFOX的写法

    根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别I ...

  4. Css样式兼容IE6&comma;IE7&comma;FIREFOX的写法

    根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别I ...

  5. div&plus;css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  6. 兼容IE6&sol;IE7&sol;IE8&sol;FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  7. 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome

    在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...

  8. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

随机推荐

  1. ERROR ITMS-90167&colon; &quot&semi;No &period;app bundles found in the package&quot&semi;错误

    ERROR ITMS-90167: "No .app bundles found in the package" 出现如上错误请查检以下2个方向: 1.macOS Sierra 1 ...

  2. Web报表工具JS开发之日期校验

    在报表开发过程中,我们常常需要对查询界面进行日期校验.例如有两个参数:开始日期和结束日期,我们要校验的是:开始日期与结束日期不能为空,结束日期必须在开始日期之后以及结束日期必须在开始日期后的某个时间段 ...

  3. POJ2195 最小费用流

    题目:http://poj.org/problem?id=2195 处理出每个人到每个门的曼哈顿距离,分别建立容量为1费用为曼哈顿距离的边,在源点和每个人人之间建立容量为1费用为0的边,在门和汇点之间 ...

  4. NOIp 2011 mayan游戏 搜索

    题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...

  5. cheat-linux命令行实用助记工具

    cheat究竟用来干嘛? 我们虽然能够使用man和--help来帮助我们查看命令使用方式,但是很多工程师都觉得,他们显然还不够man! 看看cheat是怎么man的 当我敲下cheat tar的时候, ...

  6. 每天一点css3聚沙成塔（一）：transition

    transition 语法: transition:[ transition-property ] || [ transition-duration ] || [ transition-timing- ...

  7. Ext Js详解指南

    什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...

  8. 三目运算符与Scanner类

    1.三目运算符(条件运算符)格式:X ? Y : ZX表达式必须是boolean类型 的表达式执行流程:首先计算X表达式的结果,如果X的结果为true,那么整个表达式的结果就是Y的值如果X的结果为tr ...

  9. C&num;以管理员用户打开某个程序

    static void Main(string[] args) { string path = @"C:\Windows\AppPatch\AppLoc.exe"; Process ...

  10. shell脚本案例分享 - 业务系统日志自定义保留或删除需求

    需求说明:  线上某些业务系统的日志不定期产生, 有的每天产生, 有的好几天才产生, 因为系统只有在用的时候才产生日志,日志文件均存放在以当天日期命名的目录下. 当日志目录越来越多时就需要处理, 由此 ...

相关文章