<!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中的內容垂直居中實例
</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div.demo{width: 240px;margin: 12px auto;border: 1px solid #1987df;color:
inherit;background: #CEE7FF} div#outerbox{height: 70px;position: relative;display:table}
div#outerbox div{position: absolute;top: 50%;left: 0} div#outerbox p{position:
relative;top: -50%;margin: 4px;text-indent: 0; font-size:14px;} div#outerbox>div{display:table-cell;vertical-align:middle;position:static}
</style>
</head>
<body>
<div class="demo" id="outerbox">
<div>
<p>
對於div中文字可以使其垂直居中,我要兼容IE和firefox!
</p>
</div>
</div>
</body>
</html>div中的內容垂直居中實例
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.