关于网站标准化进程中的居中问题

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

昨天晚上RE问我,说如何让表格居中,但又不让表格的单元格里的内容居中,并且他不想用非标准化的表现,比如说像<table align=”center”>这样子,像后他就在外面加了个<div id=”centertable”>然后设置,这个ID的text-align:center;

结果,让他失望了.

在XHTML以及CSS2.0里,居中属性只有一种,就是text-align,其实,他的作用就和字面意思一样,是让文本居中的,如果设置*{text-align:center;}或是body {text-align:center;}那就是网页里的所有内容都居中了,包括大的表格以及其中的单元格.这个很好解决,可以这样来定义

body {text-align:center;}

p,td,div {text-align:left;}

这样的话就可以 .表格可以居中,但里面的内容还是如原来一样的居左的,对于IE这样的设置已经够了,但对于如mozilla这样的浏览器来说,body{text-align:center;}这个设置是无效的,IE和MOZILLA的盒模型的解释是不一样的,导致结果也就不一样了.

我们可以再加入这个属性

body {

text-align:center;

margin-left:auto;

margin-right:auto;

}

这样一来,在MOZILLA里时显示也就居中了,并且这个设置并不影响IE的正常显示.

另外对于,CSS的设置,还是求精简化好一些,比如说设置链接a的属性,同样的设置不必在每个ID里或是a的每个伪类里去设置,而一些特殊的再去特殊设置.例如:

a {

padding:10px;

display:block;

}

a:hover {

background:#eee;

color:#369;

}

如上a里的属性就不用再在a:hover里再写一遍了...

还有一个用DIV+CSS设计要注意的问题就是,如果你定义了一个DIV的宽度,那么他的实际宽度应该 是

div's width=width+padding left+padding-right+border left+ border right

而如果还有margin属性的话,他占用的空间还得再加上margin的值了.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航