更新日期:2024-10-08 16:06:16 文章編輯:網訊互聯 瀏覽次數:212
上一篇我們講了CSS常見的讓元素水平居中顯現辦法(一),今天我們接著講辦法二:
3.組合使用主動外邊距和文本對齊
因為文本對齊居中辦法有著杰出的向下兼容性,且主動外邊距辦法也被大多數當代瀏覽器支撐,所以很多設計師將二者組合起來使用,以期讓居中作用得到大極限的跨瀏覽器支撐:
body {
text-align: center;
}
#container {
margin-left: auto;
margin-right: auto;
border: 1px solid red;
width: 168px;
text-align: left
}
可是這始終是個hack,無論如何也算不上完美。咱們仍是需要為居中容器中的文本編寫附加的規則,但至少在各個瀏覽器中看起來都不錯。
4.負外邊距解決計劃
負外邊距解決計劃遠不是僅僅為元素增加負外邊距這么簡略。這種辦法需要同時使用絕對定位和負外邊距兩種技巧。
下面是該計劃的具體實現辦法。首先,創建一個包含居中元素的容器,然后將其絕對定位于相對頁面左邊邊際50%的方位。這樣,該容器的左外邊距將從頁面50%寬度的方位開始算起。
然后,將容器的左外邊距值設置為負的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點。
#container {
background: #ffc url(mid.jpg) repeat-y center;
position: absolute;
left: 50%;
width: 760px;
margin-left: -380px;
}
看,沒有任何hack!盡管這并不是首選的解決計劃,但也是個不錯的辦法,且適用性極廣—甚至在Netscape Navigator 4.x中都沒有任何問題,很令人吃驚,不是嗎?所以若想得到廣泛的瀏覽器支撐,那么這種辦法將會是好的挑選。
Date:2025-04-30 15:40:39
Date:2025-04-11 10:48:21
Date:2025-03-12 12:05:30
Date:2025-03-10 12:07:23
Date:2025-03-04 10:49:34
Date:2024-10-23 15:04:25
Date:2025-04-28 16:16:21
Date:2024-11-14 11:31:08
Date:2024-10-09 10:14:23
Date:2024-12-26 15:27:34