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 的 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 里能保持和現代瀏覽器一致的效果。

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

后記

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

原文：http://blog.imbolo.com/center-multiple-divs-with-css/

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈