萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 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 浏覽器的,我用傲游和世界之窗”,在這裡我提醒一下大家,對這些無法解釋清楚的人,我們可以簡單地和他們說:“凡是能用支付寶的浏覽器都是落後的,請放棄使用。”。

copyright © 萬盛學電腦網 all rights reserved