利用 CSS 來(lái)實(shí)現(xiàn)對(duì)象的垂直居中有許多不同的方法，比較難的是選擇那個(gè)正確的方法。我下面說(shuō)明一下我看到的好的方法和怎么來(lái)創(chuàng)建一個(gè)好的居中網(wǎng)站。
步驟三
最后要做的就是再添加點(diǎn)樣式，讓頁(yè)面好看點(diǎn)。從目錄開(kāi)始吧。
#nav ul {
list-style:none;
padding:0; margin:20px 0 0 0; text-indent:0;
}
#nav li {
padding:0; margin:3px;
}
#nav li a {
display:block; background-color:#e8e8e8;
padding:7px; margin:0;
text-decoration:none; color:#000;
border-bottom:1px solid #bbb;
text-align:right;
}
#nav li a::after {
content:'»'; color:#aaa; font-weight:bold;
display:inline; float:right;
margin:0 2px 0 5px;
}
#nav li a:hover, #nav li a:focus {
background:#f8f8f8;
border-bottom-color:#777;
}
#nav li a:hover::after {
margin:0 0 0 7px; color:#f93;
}
#nav li a:active {
padding:8px 7px 6px 7px;
}
需要注意的是 #centred 的圓角。 CSS3 中，應(yīng)該有 border-radius 屬性來(lái)設(shè)定圓角的半徑(可參考 CSS3之旅: border-radius(圓角) - 糖伴西紅柿)?，F(xiàn)在的流行的瀏覽器都還不支持，除非用 -moz(Molilla Firefox) 或者 -webit(Safari/Webkit) 前綴.

兼容性注意事項(xiàng)
如你所想，IE 是唯一添麻煩的瀏覽器。 #floater 必須指定寬度，否則在任意版本 IE 中，它都啥也不干 IE 6 中目錄被周?chē)嗟目臻g打斷 IE 8 有多余空間(作者遺漏)
更多的想法
利用居中的網(wǎng)頁(yè)可以做很多有意思的事情。我在重新設(shè)計(jì) SWFObject Generator 2.0 (使用 SWFObject2.0 生成代碼)使用了這個(gè)想法。這里有另外的一個(gè)想法。
資料
以下是我參考的一些資料，推薦閱讀。
Understanding vertical-align, or “How (Not) To Vertically Center Content”
Vertical centering using CSS
Vertical Centering in CSS
糖伴西紅柿說(shuō)：
水平居中經(jīng)常用，其實(shí)垂直居中也很有用的。平時(shí)用的最多的應(yīng)該是方法五了，算是個(gè)小技巧吧。

最新評(píng)論