软件开发培训班 >> 编程开发 >> CSS

CSS解决未知高度垂直居中

　　本文标签：CSS解决未知高度垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Vertical centering in valid CSS</title> 
<style type="text/css"> 
body {padding: 0; margin: 0; font-size: 75%; line-height: 140%; font-family:Arial, Helvetica, sans-serif;} 
body,html{height: 100%; } 
a{color: #333;} 
a:hover{color: green;} 
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; } 
#outer[id] {display: table; position: static;} 
#middle {position: absolute; top: 50%;text-align:center;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align: middle; position: static;} 
#inner {position: relative; top: -50%;width: 600px;margin: 0 auto;text-align:left;}/*for explorer only */ 
div.greenBorder {border: 1px solid green; background-color: #FFF;} 
p{margin: 1em;} 
    </style> 
<script type="text/javascript"> 
// <![CDATA[

function toggleContent(name,n) { 
    var i,t=,el = document.getElementById(name); 
    if (!el.origCont) el.origCont = el.innerHTML; 
     
    for (i=0;i<n;i++) t += el.origCont; 
    el.innerHTML = t; 
    }

// ]]> 
</script> 
</head> 
<body> 
<div id="outer"> 
  <div id="middle"> 
    <div id="inner" class="greenBorder"> 
      <p>默认长度  加长页面</P> 
      <p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充 。 
 
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图 。 
 
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图 。 
 
        1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充 。 
 
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图 。 
 
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图 。</P> 
       
      Design by Forestgan 本演示采用创作共用授权--署名和非商业用途 。 
      </address> 
    </div> 
  </div> 
</div> 
</body> 
</html>

别被护眼骗了钱显示器有用参数别看走眼	win7查看电脑近期使用情况确定有没有被他人使用
蓝光真的有害吗？可以如何降低影响？	还不懂路由器组网？看完这篇文章你就明白

技术文章快速查找

HTML 5 Web SQL Database初探

Div CSS经验：组织选择符和声明

HTML中的数据绑定

Web2.0下XHTML+CSS 设计需要注意的地方小结

非常好的CSS基本布局16例

JSON隔离网站布局和页面实际模块的内容载入

网站布局进阶 CSS的继承性探讨

HTML基础详解（下）

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建