<!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. BZOJ3757: 苹果树【树上莫队】

    Description ​ 神犇家门口种了一棵苹果树.苹果树作为一棵树,当然是呈树状结构,每根树枝连接两个苹果,每个苹果都可以沿着一条由树枝构成的路径连到树根,而且这样的路径只存在一条.由于这棵苹果树 ...

  2. mysql完整版

    mysql: dbs 数据库系统 bdms 数据库管理系统 bda 数据库管理员 db 数据库 dba通过dbms来操作db! 关系型数据库和非关系型数据库 登录mysql mysql -h主机地址 ...

  3. IIS 使用 HTTP/2

    什么叫HTTP/2? HTTP 2.0即超文本传输协议 2.0,是下一代HTTP协议.是由互联网工程任务组(IETF)的Hypertext Transfer Protocol Bis (httpbis ...

  4. 【HAOI2008】玩具命名

    水题大失败 原题: 某人有一套玩具,并想法给玩具命名.首先他选择WING四个字母中的任意一个字母作为玩具的基本名字.然后他会根据自己的喜好,将名字中任意一个字母用“WING”中任意两个字母代替,使得自 ...

  5. python 二维list取列

    b = [i[0] for i in a] # 从a中的每一行取第一个元素.

  6. java数据结构链表（纯面向对象的方式）

    //Node.java //LinkedList.java _____ //测试类 [lcy, haha]    1  lcy 删除的对象是 1[lcy, haha] lcy

  7. GStreamer插件分类

    gst-plugins-base一套小而固定的插件,涵盖各种可能类型的elements; 这些在开发系列期间随着核心变化而不断更新.我们相信分销商可以安全地发行这些插件.人们编写插件应该将他们的代码基 ...

  8. How Distributed Outer Joins on PostgreSQL with Citus Work

    转自: https://docs.citusdata.com/en/v7.5/articles/outer_joins.html SQL is a very powerful language for ...

  9. python、java大作战，python测试dubbo接口

    很多小伙伴都反映公司要求测dubbo(dubbo是一个java的分布式开源框架)接口,不会写java代码,怎么测,能不能用python来调dubbo接口.当然是可以的了,最近研究了一下,很简单,分享给 ...

  10. vue-cli 知识点

    vue init webpack [project_name] 构建的项目,新增功能需要做的工作: table th:first-of-type { width: 100px; } table th: ...