如何让网页居中显示
操作方法
- 01
目前居中设计在网页布局应用中非常广泛,所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一。设计网页居中显示主要有一以下两种基本方法。
- 02
(1)使 用自动空白边让网页居中显示
- 03
假设一个布局,希望其中的容器Div在屏幕上水平居中: <body> <div id="box"></div> </body> 只需要定义Div的宽度,然后将水平空白边设置为auto: #box{ width:720px; margin:0 auto; } 这种CSS掩饰定义方法在所有的浏览器中都是有效的。但是在IE5.x和IE6中不支持自动空白边，因为IE将text-align：center 理解为让所有对象居中，而不只是文本。可以利用这一点，让主体标签中的所有对象居中，包括容器Div，让后将容量的内容重新对准左边，如下： body{ text-align:center; <!--设置文本居中显示--> } #box{ width:720px; margin:0 auto; text-align:left; <!--设置文本向左显示--> } 以该种方法使用text-align属性，不会对代码产生任何严重影响。
- 04
(2)使用定位和负值空白边让网页居中显示
- 05
首先定义容器的宽度，然后将容器的position属性设置为relative，将lef属性设置为50%，就可以把容器的左边缘定位在页面中间。如下： #box{ width:720px; position:relative; left:50%; } 如果不希望让容器的左边缘居中显示，而是容器的中间居中，只要对容器的左边应用一个负值的空白边，宽度等于容器宽度的一半，即可以把容器向左移动其宽度的一半，从而让它在屏幕上居中，如下： #box{ width:720px; position:relative; left:50%; margin-left:-360px; }