<!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. CodeForces - 457C：Elections（三分）

    You are running for a governor in a small city in Russia. You ran some polls and did some research, ...

  2. 发布网站的时候发现360极速浏览器ie7内核不兼容样式的问题

    引言:  在Web应用的开发过程中,发现若干页面在360的浏览器上显示不正常,而在其他的浏览器上,皆为正常状态,问题出在哪里呢? 问题的提出: Web页面在360的浏览器上,显示不正确. 但是在Fir ...

  3. POJ3669解题报告（bfs）

    POJ3669http://poj.org/problem?id=3669 很明显是一道bfs的题目 由于陨石的降临具有时刻性,所以地图是随时间变化的, 所以可以使用结构体来存储陨石下落的时刻以及位置 ...

  4. 图片加载完毕后执行JS代码

    $("#img").load(function(){...}); 这是jquery提供的一个方法,但是在IE中会有BUG,IE8不支持,IE9以上刷新后也不会执行,只有强制刷新才执 ...

  5. 实习第二天-今年第一场雨-方法的重载（马上想到println()函数和abs（函数））

    在C语言中 调用函数abs()返回一个整数的绝对值, fabs(返回一个单精度浮点型的绝对值)若要返回这些数的绝对值,则必须记住这些函数的名字 java可以用方法的重载:即是方法名必须相同,参数必须不 ...

  6. Patch打补丁学习笔记

    1.基本命令语法: patch [-R] {-p(n)} [--dry-run] < patch_file_name p:为path的缩写. n:指将patch文件中的path第n条’/’及其左 ...

  7. ereg()替换为preg_match()，ereg_repalce替换为preg_replace得加斜杠

    PHP 5.3 ereg() 无法正常使用,提示“Function ereg() is deprecated Error”是因为它长ereg 函数进行了升级处理,需要像preg_match使用/ /来 ...

  8. tomcat源码阅读之SingleThreadModel

    一.接口简介: 实现了SingleThreadModel接口的servlet类只能保证在同一时刻,只有一个线程执行该servlet实例的service方法,在tomcat实现中会创建多个servlet ...

  9. JSP include 指令

    1. 创建test5.jsp test5_1.jsp test5_2.jsp test5_1.jsp <%@ page import="java.util.*" %> ...

  10. 【python】正则表达式-常用函数

    m = re.search(pattern, string) # 搜索整个字符串,直到发现符合的子字符串. m = re.match(pattern, string) # 从头开始检查字符串是否符合正 ...