昨天晚上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的值了.