對於頁面上的塊級元素,只須定寬及設定margin:0 auto;即可在水平上居中,但對於浮動的元素水平居中是無效的,乙個典型的應用就是頁面的分頁效果了
分頁效果,在以往可能會採取設定inline-block,然後父容器設定text-align:center方式來實現內容居中,像如下**:
"">class="
wrap page2
">
"#"#">1
"#">2
"#">3
"#">4
"#">5
"#">6
"#">1
"#">2
"#">3
"#">4
"#">5
"#">6
"#
這種設定inline-block的缺點是,元素需要設定vertical-align:middle,並且ie下不能完美對齊,以及元素間有空白符等。。
所以可以考慮用float方式代替inline-block,優點是float的元素盒模型好控制 ,無空白符等等。
**如下:
"">class="
wrap clearfix
">
class="
wrap page2
">
"#"#">1
"#">2
"#">3
"#">4
"#">5
"#">6
"#">1
"#">2
"#">3
"#">4
"#">5
"#">6
"#
這裡主要用到position:relative配合left:50%的技巧,相容各瀏覽器,需要注意的是ie7下需要設定overflow:hidden;來解決無法設定子元素寬度的bug。
這裡也可以多套一層的方式設定left:-50%,更合理,也可以避免一些不必要的ie bug,如下**:
"">class="
wrap clearfix
">
class="
inwrap
">
如何讓設定浮動的元素水平居中
1.可以設定margin 0 auto居中 container content content div left 2.先設定它的 margin left 50 這個時候元素的左邊緣正好位於其父元素的 然後設定其position relative left 負本元素寬度的一半,這樣的目的是將本元素向左...
居中div,居中浮動的元素
定位法 position absolute 如果子級div有定義寬和高的話就可以用這個方法。注意 margin top,和margin left的值均為高和寬值的一半 margin auto法 這個也可以是定位法。用這個方法要求子級div必須設定寬的值,不然沒有效果哦 margin auto是水平垂...
html元素水平居中
一 行內元素水平居中 如下 行內元素在父容器中水平居中顯示。效果 二 塊狀元素水平居中 當被設定元素為塊狀元素時,text align center 就不起作用了,此時分兩種情況 定寬塊狀元素和不定寬塊狀元素。1 定寬塊狀元素 塊狀元素的寬度width為固定值 方法 滿足定寬和塊狀兩個條件的元素可以...