<!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+

    图文-水平垂直居中兼容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,IE7,FIREFOX的写法

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

  4. Css样式兼容IE6,IE7,FIREFOX的写法

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

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

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

  6. 兼容IE6/IE7/IE8/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. PHP CURL HTTPS内存泄露问题

    还原场景:通过一直运行脚本,向微信用户发送模板消息,发现运行了一段时间,内存就爆了,然后立马看了一下代码,发现跟其他的消息逻辑一模一样,唯一不一样的就是请求了微信的接口:然后继续开始找问题,发现当时使 ...

  2. 《DSP using MATLAB》Problem 4.10

    今天擦完了玻璃,尽管有地方不那么明亮干净,冷风中瑟瑟发抖,年也快临近了. 代码是从网上找的, function [p, np, r, nr] = deconv_m(b, nb, a, na) % Mo ...

  3. web 常用网址及资源

    一.web教程 w3school在线教程 菜鸟教程 二.学习路线 2017前端学习路线图,内附完整前端自学视频教程+工具经验-黑马程序员技术交流社区 三.工具 盘搜 百度地图 查物流 金山词霸 必应词 ...

  4. Codeforces Round #243 (Div. 2)——Sereja and Swaps

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012476429/article/details/24665103 题目链接 题意: 给定一个整数 ...

  5. Nginx服务器抵御CC攻击的相关配置讲解

    CC攻击利用代理服务器向网站发送大量需要较长计算时间的URL请求,如数据库查询等,导致服务器进行大量计算而很快达到自身的处理能力而形成DOS.而攻击者一旦发送请求给代理后就主动断开连接,因??代理并不 ...

  6. mac上安装nginx

    终端执行: brew install nginx nginx 默认安装在 /usr/local/Cellar/nginx/1.12.2 conf 文件默认安装在 /usr/local/etc/ngin ...

  7. MapReduce-线性回归

    线性回归有是三个值很重要: 1. 斜率 2. 截距:x和y轴的交点值: 3. 显著性:数据偏离线性的程度,用以判断数据可以用线性表示的程度:拟合度   apache.commons.math3里面有一 ...

  8. QString和char字符串数组之间的转换 （转）

    做串口通信时,碰到这样的问题,在Qt的界面中,我用QLineEdit对象负责显示发送和接收的文本,对其中的数据进行读取和显示使用的数据类型都是QString:但是,在对串口设备进行读写时,数据使用的形 ...

  9. Python——包

    包 —— 把解决一类问题的模块放在同一个文件夹里 包的导入 import 和 from ... import 都行 导入之前:凡是带点的,点的左边都必须是包 导入之后:点的左边可以是包.模块.函数.类 ...

  10. spring boot学习(2) SpringBoot 项目属性配置

    第一节:项目内置属性 application.properties配置整个项目的,相当于以前的web.xml: 注意到上一节的访问HelloWorld时,项目路径也没有加:直接是http://loca ...