DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS box-align: center實現子框架居中
CSS box-align: center實現子框架居中
編輯: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 浏覽器的,我用傲游和世界之窗”,在這裡我提醒一下大家,對這些無法解釋清楚的人,我們可以簡單地和他們說:“凡是能用支付寶的浏覽器都是落後的,請放棄使用。”。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved