浮動元素的水平居中

2022-02-04 01:31:15 字數 1100 閱讀 8076

對於頁面上的塊級元素,只須定寬及設定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為固定值 方法 滿足定寬和塊狀兩個條件的元素可以...