有時我們需要令一個寬度固定的容器裡的子框架居中(例如一個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 浏覽器的,我用傲游和世界之窗”,在這裡我提醒一下大家,對這些無法解釋清楚的人,我們可以簡單地和他們說:“凡是能用支付寶的浏覽器都是落後的,請放棄使用。”。