当前位置: 代码迷 >> Web前端 >> DIV依据内容宽度、高度自适应,垂直水平居中
  详细解决方案

DIV依据内容宽度、高度自适应,垂直水平居中

热度:114   发布时间:2012-09-06 10:37:01.0
DIV根据内容宽度、高度自适应,垂直水平居中

<!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" />
??<meta name="author" content="Chomo" />
??<title>根据内容宽度、高度自适应,垂直水平居中,内容高度超过窗体时,垂直居顶</title>
??<style type="text/css">
???html { height:100%;}
???body { height:100%; text-align:center;}
???.centerDiv {
??????display:inline-block;
??????zoom:1;
??????*display:inline;
??????vertical-align:middle;
??????text-align:left;
??????width:200px;
??????padding:10px;
??????border:1px solid #f60;
??????background:#fc0;}
???.hiddenDiv {
??????height:100%;
??????overflow:hidden;
??????display:inline-block;
??????width:1px;
??????margin-left:-1px;
??????zoom:1;
??????*display:inline;
??????*margin-top:-1px;
??????margin-top:0;
??????vertical-align:middle;
??????background-color: #CC6699;}
??</style>
?</head>
?<body>?
??<div class="centerDiv">
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
???蓝色理想<br/>
??</div><div class="hiddenDiv"></div>
??<div? style=""></div>
?</body>
</html>

  相关解决方案