<!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. ES6必知必会 （二）—— 字符串和函数的拓展

    字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes().startsWith().endsWidth() 三个方法用于判断 ...

  2. Laravel 5.1 中 Session 数据存储、访问、删除及一次性Session实例教程

    1.Session的由来及其实现 HTTP协议是无状态的协议,同一个客户端的这次请求和上次请求是没有对应关系的.也就是说我们无法在服务器端确认两次请求是否是同一个用户所为,这为我们在一些应用场景中实现 ...

  3. PowerCollections

    Wintellect 的Power collections 库 BigList<String> str = new BigList<String>(); str.Add(&qu ...

  4. Google Android API官网封杀了，没法查android技术资料的3种解决方式

    1.从uhdesk上訪问简化版android api在线文档(反应速度极快) http://www.uhdesk.com/simpleandroidoc/index.html   2.下载chm本地文 ...

  5. BAT调用7z压缩程序

    @echo offset zip=C:\Program Files\7-Zip\7z.exeset timestamp=%date:~6,4%-%date:~0,2%-%date:~3,2%set d ...

  6. servlet / jsp(一)

    2016-03-25 11:34:14 一.实现一个简单的servlet程序 Servlet是在服务器端运行的小程序,这是一个很广泛的概念,并没有说是在web服务器端运行的小程序,除了在web服务器上 ...

  7. java 搭建新项目，最佳组合：spring boot + mybatis generator

    java 搭建新项目,最佳组合:spring boot + mybatis generator

  8. 【python】格式化字符

    格式化字符串总结如下,红色部分是需要掌握部分: 以下几个常用的实例: 1.%s的使用 "%s is the author" %("paulwinflo")> ...

  9. vs2015 去除 git 源代码 绑定，改成向tfs添加源码管理

    除了下文的方法是将源码管理从git改成tfs之外,还要做以下几步即可 向tfs添加源码 打开源码管理(管理连接),双击打开你要向其中添加的tfs连接 选中该解决方案,右键 将解决方案添加到源码管理 嵌 ...

  10. 【Active入门-2】ActiveMQ学习-生产者与消费者

    1个生产者,1个消费者,使用Queue: 方式1: 生产者将消息发送到Queue中,退出: 然后运行消费者: . 可以看到,可以接收到消息. 方式2: 先运行消费者程序: 然后运行生产者: 消费者见下 ...