CSS實現垂直居中!

 點擊這個就知道了.牛. 

<html>  
<head>  
<title>Nice and Free CSS Template 09</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<style>
html,body
{margin:0px;height:100%;}
.list
{
clear
:left;
border-bottom
:1px solid #fff;height: 50px;}

.list .td
{float:left;width:100px;height:100%;background:#333;color:white;}
.mid
{position: relative}
.mid div
{position: absolute;top: 50%;left: 0}
.mid p
{position: relative;top: -50%}
div.list>div.mid
{position: static;display:table}
div.list>div.mid>div
{display:table-cell;vertical-align:middle;position:static}
</style>
</head>  
<body>
<div id="sdf"> 
<div class="list"><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div></div>
<div class="list"><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div></div>
<div class="list"><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div></div>
<div class="list"><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div><div class="td mid"><div><p>sdf</p></div></div></div>
</div>
</body>  
</html>  

http://www.blueidea.com/tech/web/2006/3231.asp

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章