CSS多個子框架居中的技巧

歡迎大家在這裡學習CSS多個子框架居中!這裡是我們給大家整理出來的精彩內容。我相信，這些問題也肯定是很多朋友在關心的，所以我就給大家談談這個!

有時我們需要令一個寬度固定的容器裡的子框架居中(例如一個Div ，或者其他block級元素)，如果子框架只有一個的話，我們只需要為子框架加上CSS屬性margin：auto就可以了。

但如果我們要讓多個子框架居中，並且等分父框架剩余的空間的話，我們對所有子框架使用CSS box-align： center 來實現這種效果。

可是目前還有相當一部分主流浏覽器不支持box-align屬性，那麼我們應該如何編寫CSS，使這種效果能兼容大部分的浏覽器呢?

通常的方法

為了使多個block級元素排列在同一行裡，我們習慣使用float 屬性使子框架浮動，然後利用margin屬性讓每一個子框架之間都留出一些空白的間距。可是這樣做會觸發經典的IE6雙倍margin BUG，這樣反而要投入額外的時間去調試IE6 的Hack。

雖然我們還可以通過display： inline來避開IE6的BUG，但我們仍然需要調整這些子框架間的間距，防止最後一個自框架被擠到下一行。

改變子框架級別並且控制剩余的空白

使用float和margin來讓多個子框架居中並且等分父框架剩余空間的做法缺點很多。為了避開這些缺點，我們還可以使用另一種方法：把子框架的級別改為inline-block ，並且通過letter-spacing屬性 控制自框架之間的間距。

假設在一個父框架裡有四個block級的子容器，每個子容器的大小均為100px x 100px。為了讓這些子框架能排列在同一行內，我們可以把它們改為 inline-block 級，由於子框架和父框架之間並沒有其它的內容，應此要控制子框架的空間分配將易如反掌。姑且假設父框架id=parent，子框架class=child，那麼CSS可以這樣寫：

以下為引用的內容：

#parent {

width: 615px;

border: solid 1px #aaa;

text-align: center;

font-size: 20px;

letter-spacing: 35px;

whitewhite-space: nowrap;

line-height: 12px;

overflow: hidden;

}

.child {

width: 100px;

height: 100px;

border: solid 1px #ccc;

display: inline-block;

vertical-align: middle;

}

在這段樣式裡，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 這些屬性是實現預想效果的關鍵，下面解釋一下這些屬性起了什麼作用。

text-align：使 #parent裡的所有內容都居中

letter-spacing：控制每個子框架之間的空白大小

white-space:nowrap：防止最後一個子框架被擠到下一行

overflow:hidden：隱藏超出 #parent 范圍的內容

vertical-align:middle：使所有子框架都垂直居中

display:inline-block：是所有子框架都排列在同一行，並且保持 block 級元素的特性

兼容IE

在今時今日，老版本的IE浏覽器已經成為網頁設計師的心頭大恨，雖然上面的CSS能兼容IE8，但由於IE6和IE7並不完全支持inline-block 級元素，因此我們還需要寫下面的一段Hack，確保在IE6 和IE7裡能保持和現代浏覽器一致的效果。

以下為引用的內容：

.child {

*display: inline;

*margin: 0 20px 0 20px;

}

本文所舉例子的最終效果可以看這個DEMO。

後記

本文所舉的例子雖然只有短短的兩句IE Hack，但在實際開發中大家要寫的Hack肯定要多很多，因此淘汰老版本 IE 的任務已經刻不容緩。我聽過很多人說：“我不用 IE 浏覽器的，我用傲游和世界之窗”，在這裡我提醒一下大家，對這些無法解釋清楚的人，我們可以簡單地和他們說：“凡是能用支付寶的浏覽器都是落後的，請放棄使用。”。

好了，CSS多個子框架居中內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

css針對浏覽器的選擇器的技巧