昨天晚上RE問我,說如何讓表格居中,但又不讓表格的單元格里的內容居中,並且他不想用非標準化的表現,比如說像
這樣子,像後他就在外面加了個然後設置,這個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的值了.
