通过css实现div的居中

做网页的布局的时候，为了美观经常需要把文字图片等居中。习惯使用table布局后发现很难用div来实现相同的效果。其实会者不难，只要通过下面的一段代码就可以方便得实现div得居中，而且在例子中我还实现了两个侧栏，通过这个布局基本可以满足大多数网页整体布局的需要了。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
3 <head profile="http://gmpg.org/xfn/11">
4 </head>
5 <body>
6 <div style=" position:relative; margin-left:auto; margin-right:auto; width:786px; background-color:Purple;">
7 <div style="width:500px; float:right">内容</div>
8 <div style="background-color:Yellow; width:200px">侧栏上</div>
9 <div style="background-color:Blue; width:200px">侧栏下</div>
10 </div>
11 </body>
12 </html>

代码文件下载

posted on 2008-03-08 04:45 乌生鱼汤阅读(427) 评论(0) 编辑收藏举报

刷新页面返回顶部

sailing

通过css实现div的居中

导航