DIV 多行文字或图片垂直居中 FF/ IE 6,7,8

最新推荐文章于 2024-10-20 18:03:05 发布

mathew3625

最新推荐文章于 2024-10-20 18:03:05 发布

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： div ie html border xhtml table

本文链接：https://blog.csdn.net/mathew3625/article/details/4204010

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

---<!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</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="盒子模型图解.gif" width="200px"/><br />
fgdsgsdfgdfgfdgdf
</pre>