June 2, 2005

CSS 版面控制: 固定置中版面以文找文

Editor: 柏強,經原作者 Jace Ju 授權、改寫自如何正確實作出固定寬度且置中的版型

網頁設計師為了版面美觀,時常會想讓網頁的某塊區域置中。在以前拿表格來排版時,我們可以用以下方式達成目的:

<table align="center" border="1" width="200">
  <tr><td>網頁內容</td></tr>
</table>
網頁內容

不過,以表格排版的話頁面的版型就定死了,毫無靈活度可言;比較好的方法是採用 CSS 各種特性來排版,請繼續看下去。


彈性寬度

如果你的網頁寬度想依視窗寬度調節(例如訂為視窗寬的 80%),那麼便可以採用這種方式。首先我們必須先把整個網頁內容用一個 div 標籤包起來,例如:

<html>
<head>[略]</head>
<body>
<div id="container">
[網頁內容]
</div>
</body>
</html>

我們指定這個 div 標籤的 id 屬性為 container (依據規範,id 屬性的值在整個頁面裡必須是獨一無二的,不可以重複)。設定完畢以後,在 head 標籤之插入此段 CSS 程式碼:

<style type="text/css">
#container {
  margin: 0 auto;
  width: 80%;
}
</style>

這代表此樣式要套用至 id 屬性為 container 的區塊(#container),區塊寬度為視窗寬的 80%,上下邊界為零、左右邊界則由瀏覽器自動調節(auto)。如此一來,頁面就會自動置中了。

固定寬度

如果你的版面寬度固定(如 760 像素),則可以把前例的 width 特性值修改為 760px。此外對於固定寬度的版面,我們還有另一種設定方式:

#container {
  position: relative;
  left: 50%;
  margin-left: -380px; /* 760 除以 -2 */
  width: 760px;
}

這個方式比較奇妙點,position: relative; 代表此區塊將以相對方式,依其母元素(在此例為 body)的位置來定位。加上這條特性後,由於尚未指定位置,container 會依照預設值擺在母元素的左上角,如圖一所示。

container 放在母元素左上角

加上 left: 50%; 之後,此區塊左緣將移至母元素的中線,如圖二。

container 移至中線處

第三條 margin-left: -380px; 比較難解釋,簡單說就是把整個元素的左邊界往380px(區塊寬度 760px 的一半,負值就是往回拉)。如圖三所示,我們可以看到整個版面置中了。

container 移至中線處

Posted by at 天空部落 │00:00 │回應(11)引用(10)CSS
相關閱讀

引用URL

http://blog.yam.com/webdev/trackback/5035260
引用列表:
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
My website【My website】 at Jan 14, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
My website【My website】 at Jan 14, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
pily tasmowe koronet【pily tasmowe koronet】 at Jun 16, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
pily tasmowe koronet【pily tasmowe koronet】 at Jun 16, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
growtaller4idiots.Hpage.Com【growtaller4idiots.Hpage.Com】 at Aug 20, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
growtaller4idiots.Hpage.Com【growtaller4idiots.Hpage.Com】 at Aug 20, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
soundcloud.com【soundcloud.com】 at Oct 7, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
soundcloud.com【soundcloud.com】 at Oct 7, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
how you can help【how you can help】 at Oct 31, 2014
前進!網頁設計!CSS 版面控制: 固定置中版面 - yam天空部落
how you can help【how you can help】 at Oct 31, 2014
回應文章
不知道為什麼!!想要架設網業!!雖然才國2!!
Posted by 小鄭 at Dec 28, 2006
蠻實用的,謝謝
Posted by 網頁設計 at Dec 11, 2007
請問一下,設計這樣的網站要多少錢? http://e-uic.com.tw http://better4u.com.tw 公司想做新的網站,請報個價。 detecttw2008@yahoo.com.tw
Posted by 徵信社 at Jun 11, 2008
謝謝您的資訊,不過我發現這樣的作法在IE6底下會變成左半邊的網頁內容消失,後來改為position:absolute就正常顯示了。
目前firefox 3, IE7, IE6都能夠正常顯示。
不過我想不知道是不是因為之前發懶,
只是用margin:auto把整個大表格框住才發現表格沒有真正置中,又在表格加上CSS相同的定義才會變成如此,總之若有人發現畫面一半消失,可以試著把position:relative改為position:ablosute看看。
Posted by isaac at Aug 18, 2008
光碟印刷(防水全彩印刷)
旅遊光碟、成長光碟、寫真光碟、音樂光碟、
世貿展型錄光碟、畢業光碟、婚紗攝影、行銷光碟(少量燒錄+印刷)。
客制化光碟服務,能為您處理旅遊景點、公司簡介、產品型錄等光碟,
版面為彩色印刷,非坊間的貼紙處理。
我們有最嚴謹的專業團隊,以最平實優惠的價格,
包含燒錄、印刷、轉檔、設計等,為您提供專業滿意的服務…

正A級碟片,品質保證,非大陸貨,非外銷 B 級碟片
CD燒錄+印刷 1~200片 每片25元
DVD燒錄+印刷 1~200片 每片35元

02-2999-3380 ext. 603
黃肇龍 0932064229
台北縣三重市重新路五段609巷18號10樓(湯城園區內)
建銨科技股份有限公司
max@infordock.com

部落格:http://tw.myblog.yahoo.com/jw!2glaF5ueRU5KEAV6xDY0
Posted by 黃肇龍 at Aug 22, 2008
#container {
position: relative;
left: 50%;
margin-left: -380px; /* 760 除以 -2 */
width: 760px;
}
這個好像寫反了;應為:

#container {
position: relative;
left: -380px; /* 760 除以 -2 */
margin-left: 50%;
width: 760px;
}

才能運行
Posted by Caeures at Nov 29, 2009


















Posted by asdf at May 12, 2010
板大
您留言在最後面
讓我試了半個小時
感謝您的用心讓我更瞭解asp了(汗)
Posted by nose at Jul 29, 2010
想再請問一下
我的網頁目前置中了
但目前我想將整個網頁的底色以及body的底色換為兩種不同的顏色
可是換了之後
body部份的底色無法直接接到網頁的底部
請問這是要將body"手動"往下拉至最底
還是有css語法可以調整呢
Posted by nose at Jul 30, 2010
說錯 樓上的body 改成 container才對
Posted by nose at Jul 30, 2010
很實用的資訊!!
Posted by 花蓮民宿 at Aug 10, 2011