您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

DIV+CSS网页布局技巧实例1:设置网页整体居中的代码

作者:佚名    责任编辑:admin    更新时间:2022-06-22

本文是设置网页整体居中的代码的介绍,下面是该介绍的详细信息。

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。

<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<div id="layout">标准之路www.aa25.cn</div>

请看这段代码,宽度为适合800×600分辨率浏览器的宽度,margin:0 auto; 这句代码就是让居中了,意思是外边距上下设置为0,左右设为自动。这样它就居中了。

那么可能你要问了,text-align:center;为什么还要让内容居中呢?呵呵,别着急,这句是为了适应IE6以下版本的浏览器而加的,IE6以下对margin:0 auto;不能解析为居中,所以用这种方式来补救,以下在设计内容时再用 text-align:left;就可以了。

注:margin和padding的值的顺序为顺时针上右下左,如margin:1px 2px 3px 4px;还可以缩写为上下、左右,如本例,如果为margin:0px;则是各边都为0

以上就是精品提供的关于设置网页整体居中的代码的内容,希望对大家有所帮助。