15212260052 周一~周六, 8:30 - 18:00
                      527352997@qq.com 隨時歡迎您前來咨詢!
                      留學生園D座1樓 蕪湖市經濟技術開發區科創中心

                      新聞資訊

                      15212260052
                      您的當前位置:首頁 > 技術支持 > 詳細內容

                      CSS網頁布局DIV水平居中的各種方法

                      來源:www.pczonenow.com 發表時間:2018-01-24

                        在Web標準中的頁面布局是使用Div配合CSS來實現的。這其中常用到的就是使整個頁面水平居中的效果,這是在頁面布局中基本,也是應該首先掌握的知識。不過,還是經常會有人問到這個問題,在這里我簡單總結一下使用Div和CSS實現頁面水平居中的方法:

                        一、margin:auto 0 與 text-aligh:center

                        在現代瀏覽器(如Internet Explorer 7、Firefox、Opera等)現代瀏覽器實現水平居中的方法很簡單,只要設定到左右兩側的空白為自動即可。意即:

                        #wrap { margin:0 auto;}

                        上面這段代碼的意思是說使wrap這個div到左右兩側的距離自動設置,上下為0(可以為任意)。請在現代瀏覽器(如Internet Explorer 7、Firefox、Opera等)中運行現在的代碼:

                        在Firefox等現代瀏覽器設定頁面元素的水平居中,只要指定margin:0 auto;即可

                        div#wrap {

                        width:760px;

                        margin:0 auto; /*這里的0可以任意值*/

                        border:1px solid #ccc;

                        background-color:#999;

                        }

                        上面的效果很好。但是這在Internet Explorer 6及改正的版本中是不起作用的,不過幸好它有自己的解決辦法。在Internet Explorer中text-align屬性是可繼承的,即在父元素中設置后在子元素中就默認具有了該屬性。因此我們可以在body標簽中設置text-align屬性值為center,這樣頁面內所有的元素都會自動居中,同時我們還要加一個hook把頁面中的文字變成我們習慣的閱讀方式——居左對齊。因此我們要如此來寫代碼:

                        body {text-align:center;}

                        #wrap {text-align:left;}

                        這樣在Internet Explorer中我們就輕松實現了Div的居中對齊。因此要在所有的瀏覽器中顯示居中的效果,我們就可以這樣寫我們的代碼:

                        body { text-align:center; }

                        #wrap { text-align:left;

                        margin:0 auto;

                        }

                        在Firefox等現代瀏覽器設定頁面元素的水平居中,只要指定margin:0 auto;即可

                        div#wrap {

                        width:760px;

                        margin:0 auto; /*這里的0可以任意值*/

                        border:1px solid #ccc;

                        background-color:#999;

                        }

                        在Internet Explorer 6 及以下的版本中我們還要做以下的設置:

                        body { text-align:center; }

                        div#wrap {

                        text-align:left;

                        }

                        不過這里有一個前提,就是設置居中的元素要有固定的寬度,比如這里我們設定了為760像素。

                        

                      相關新聞
                      相關產品

                      微分銷

                      小程序如何快速注冊?

                      小程序審核通過后,在微信小程序中無法搜索到?

                      小程序和公眾號、app的區別?

                      小程序的入口在哪里需要下載嗎?
                      娇妻被生人粗大猛烈进出高潮,三级无码在钱av无码在钱 ,97视频精品全国免费观看