個性原創,打造品牌

拒絕模仿抄襲、拒絕模板建站;
多位資深網頁設計師同時設計,讓您優中選優;
網站獨一無二,品牌輕易提升...

了解詳情 >

代碼規范,國際標準

后臺php+mysql動態管理,功能強大,千萬級數據;
前臺div+css生成靜態,代碼精簡,訪問速度快,
符合w3c國際標準,兼容ie/火狐/蘋果等任意瀏覽器...

了解詳情 >

細微高效,全程無憂

域名一個,主機一臺;
主機BGP多線路,5G存儲空間,流量不限;
新聞錄入、圖片處理、數據備份、安全監測、網站升級...

了解詳情 >

移動時代,機不可失

全新視覺、創新操作;
跨平臺兼容,微信無縫對接;
不容錯過的手機網絡商機,不能錯過的手機網站時代...

了解詳情 >

搜索領先,鎖定訪客

在主流搜索引擎的搜索結果中,
網站的名稱,排在第一頁的第一名,
網站其他相關的3-5個關鍵詞,排在第一頁...

了解詳情 >

營銷利器,決勝千里

全國統一呼叫,品牌企業的象標志。
中國電信4008/4009、中國聯通4000/4006,號碼任選;
通話資費預存...

了解詳情 >
以“信”為主的服務理念,“源”為標桿的服務特點351532641點擊咨詢010-86203368聯系電話
CSS問題設計問題程序問題優化問題

實現CSS制作網頁時絕對居中問題

發布時間:2012-09-20      瀏覽次數:957

什么叫絕對居中?就是說容器到屏幕左右上下四個方向都有間距,并且隨屏幕大小縮放相對不變或者等比例調整,始終居屏幕中間。絕對居中也有兩種情況,容器的絕對大小和相對大小。 同時有很多方法可以實現,總結起來大致如下:

1.利用table特性,在width and height all set 100%的時候,可以把容器嵌套在td內形成絕對居中,此時的被嵌套容器可為絕對或者相對大小。(非標準)注意不能加聲明!

如是在標準模式下要加樣式body,html{height:100%;padding:0;margin:0;}










2.利用負邊距方法,絕對定位使容器相對屏幕絕對居中,此時的被嵌套容器只能為絕對大小。(標準)根據margin負值和top left的比例控制,實現隨屏幕絕對居中,容器大小改變需要重新調整margin top left的參數:



3.老外給出的另類方法,巧妙利用display:inline-block;IE6.0測試通過。(標準)

注意1.height:100%是關鍵:2.edgecontainer沒有嵌套關系:

這應該算是IE的一個bug,個人對display:inline-block理解有限。edge可以看作一個填充,container現在是一個上下居中的對象,加了背景色能看的更清楚,當然你也可以在container內添加任何絕對或者相對大小容器。但問題在于span只是一個內聯元素,在內部添加塊級元素是不標準的邏輯。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">


</span><span style="font-size:10pt;font-family:宋體;">無標題文檔<span>

IE6.0環境下實現


4.CSS行為expression控制實現,不過expressionIE獨有,并且耗資源嚴重,尤其在大量使用的時候。(標準)

注意關鍵定義,不要以為height:100%IE內是沒用的:

實時獲取屏幕高寬值,分別減去容器高寬值再除以2,得到準確坐標絕對定位:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

</span><span style="font-size:10pt;font-family:宋體;">無標題文檔<span>


上一篇:CSS網頁制作技巧:讓網頁內容居中的方法
下一篇:掌握八個CSS布局技巧

Copyright©2016  xinycx.com  All Rights Reserved  北京信源創想科技有限公司  備案號:京ICP備17071760號
地址:北京市海淀區閔莊路門頭馨村北二區33號樓3單元102室  電話:010-86203368  

北京網站建設 北京網站制作 信源創想 品牌網站建設 企業網站建設 網站設計 APP開發 微信開發 前端切圖 DIV+CSS html5切圖 APP切圖

海南七星彩玩法