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

通过css实现div的居中

2008-03-08 04:45 447 查看
做网页的布局的时候,为了美观经常需要把文字图片等居中。习惯使用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>

</div>

</body>

</html>



代码文件下载
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: