注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

享受编码

    的乐趣

 
 
 

日志

 
 

DIV 多行文字或图片垂直居中  

2010-04-02 23:02:22|  分类: CSS & HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

DIV 多行文字或图片垂直居中

2010-01-21 15:34

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

<title> DIV 多行文字或图片垂直居中 FF/ IE 6,7,8 ok version</title>

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

<style type="text/css">

body { font-size:12px;font-family:tahoma;}

div#wrap {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

_position:relative;

overflow:hidden;

}

div#subwrap {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

-left:50%;

}

div#content {

_position:relative;

_top:-50%;

_left:-50%;

text-align: center;

}

*+html div#wrap {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

position:relative;

overflow:hidden;

}

*+html div#subwrap {

vertical-align:middle;

display:table-cell;

position:absolute;

top:50%;

left:50%;

}

*+html div#content {

position:relative;

top:-50%;

left:-50%;

text-align: center;

}

</style>

</head>

<body>

<div id="wrap">

<div id="subwrap">

<div id="content">

<img src="http://www.baidu.com/img/baidu_logo.gif" width="200px"/><br />

fgdsgsdfgdfgfdgdf

</pre>

</div>

</div>

</div>

</body>

</html>

<html>

<body>

<style type="text/css">

.box

{

display:table-cell;//兼容ie

vertical-align:middle;//兼容ie

text-align:center;

*display:block;

*font-size:175px;//175是height的0.873倍

width:200px;

height:200px;

border: 1px solid blue;

}

</style>

<div class="box">

<img src="http://www.baidu.com/img/baidu_logo.gif" />

</div>

</body>

</html>

  评论这张
 
阅读(1227)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017