您的位置：首页 > Web前端 > CSS

纯 css 实现div垂直居中,类似于 table 行合并

2012-12-21 00:00 246 查看

<!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" />
<style>
*{ margin:0; padding:0;}
.demo{border:1px #ddd solid;width:1100px;overflow:hidden;text-align:center;position:relative;}
.pos1{border:1px solid #cccccc; position:relative;}
.dpos1{position:absolute;left:250px; top:40%;}
.dpos2{position:absolute;left:550px; top:40%;}
.dpos3{position:absolute;left:850px; top:40%;}
.dpos01{position:absolute;left:250px; top:0px;}
.dpos02{position:absolute;left:550px; top:0px;}
.dpos03{position:absolute;left:850px; top:0px;}
.fw300{float:left;width:300px;}
.fw{float:left;width:300px;height:10px;line-height:10px;}
</style>
</HEAD>

<BODY>
<div class="demo">
<div>
<div class="fw300"><a href="a.html">MU3514(7W)</a></div>
<div class="fw300"><a href=1b.html>SZX/BJS</a></div>
<div class="fw300"><a href=33b.html>10:20/11:20</a></div>
</div>
<div style="clear:both;"></div>

<div>
<div class="fw300"><a href="a.html">MU3514(7W)</a></div>
<div class="fw300"><a href=1b.html>SZX/BJS</a></div>
<div class="fw300"><a href=33b.html>10:20/11:20</a></div>
</div>
<div style="clear:both;"></div>

<div>
<div class="fw300"><a href="a.html">MU3514(7W)</a></div>
<div class="fw300"><a href=1b.html>SZX/BJS</a></div>
<div class="fw300"><a href=33b.html>10:20/11:20</a></div>
</div>
<div style="clear:both;"></div>

<div>
<div class="fw300"><a href="a.html">MU3514(7W)</a></div>
<div class="fw300"><a href=1b.html>SZX/BJS</a></div>
<div class="fw300"><a href=33b.html>10:20/11:20</a></div>
</div>
<div style="clear:both;"></div>

<div class="dd1"><div class="pos1">2012-05-20</div></div>
<div class="dd2"><div class="pos1">1次</div></div>
<div class="dd3"><div class="pos1">10000</div></div>
<div style="clear:both;"></div>

</div>

</BODY>
</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css实现div垂直居中

相关文章推荐

新的分享

章节导航