19.3.2　设置层居中

层居中并不同于用align设置TABLE布局的居中，前面也提到过，TABLE布局已不是当今所选择的了，而DIV+CSS才是被广大网页制作者喜爱的（往往有很多用TABLE布局的人不太习惯用DIV+CSS，因为DIV不容易控制），但也会遇到很多问题，如层默认都是向左对齐的，但因实际需要，要设置成层居中，这时得动动脑筋了。正如初学DIV+CSS布局者所困惑，如何设置才可以让层居中，本实例除介绍了设置尺寸外，还对很多初学者如何设置层居中做解析。

层的默认大小是按父对象宽的100%，即该层所在的范围有多宽层就显示多宽，当层在确定宽度时，也是按左对齐的，所以默认时层不会居中。为了让层居中，就得改变层的默认值，即要确定层的大小，调整层的外补丁（外补丁起关键作用，也是初学者不注意的地方，下一章会介绍），这样层就可以在网页中间显示了，超过层大小的，在两边用默认的白色填充，下面将步骤一步一步演示给读者。

（1）新建层并设置大小和边框以区别层大小。

代码19.5　源代码\第19章\设置层居中.html

——————————————文件名：设置层居中.html——————————————-

01 ＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

02 "http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

03 ＜html＞

04 ＜head＞

05 ＜title＞设置层居中＜/title＞

06 ＜style type="text/css"＞

07 #mydiv

08 {

09 /设置尺寸大小/

10 width：400px；

11 height：300px；

12 border：1px solid red；

13 }

14 ＜/style＞

15 ＜/head＞

16 ＜body＞

17 ＜div id="mydiv"＞

18 HTML+CSS完全自学手册

19 ＜/div＞

20 ＜/body＞

21 ＜/html＞

【代码解析】代码第10、11行只设置了层的宽度和边框，从红色边框里可以看出层包含了文字，且在网页中居左显示，且层的大小已确定，效果如图19.6所示。

图　19.6　设置层大小与边框

（2）设置外补丁使用层对上面左右的距离为自动。外补丁用margin表示，后面接的值表示距离，如接4个值，分别表示上右下左的位置；如只有两个值，第一个表示上下距离，第二个表示左右距离；如果只有一个值，那么上右下左都是以这个值为距离。当然还可以设置成auto，这样设置表示上下左右都是自动距离，层居中的技巧也在于此。下面代码是在代码19.5中的#mydiv加一行margin：auto所得，就是要层四个边框自动对齐。

01 #mydiv

02 {

03 /设置尺寸/

04 width：400px；

05 height：300px；

06 /设置边框/

07 border：1px solid red；

08 /层居中/

09 margin：auto；

10 }

【代码解析】第9行代码解决了居中问题，这往往是初学者不注意的地方，效果如图19.7所示。

图　19.7　margin设置层居中

注意　有时设置了margin：auto也不能居中，那要查看＜！DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”“http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”＞第一行代码有没有输入。可以试着去掉这行，层就向左边移了。