<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" 
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>如何正確實作出固定寬度且置中的版型</title>
<link>http://blog.roodo.com/jaceju/archives/77741.html/</link>
<description><![CDATA[以往，網頁開發者都會碰到這樣的問題：有時候他們會在網頁上擺放一些圖層 (像是滑鼠移過去就會出現的下拉式選單) ，但這些圖層的位置都是絕對的 ( position: absolute ) 。因此只要他們把整個版面置中後，就會發現圖層沒有跟著跑，所以這些網頁開發者僅能選擇把整個版型往左靠。但是為了符合一般瀏覽者的螢幕寬度(800 x 600)，就必須把版面的寬度固定 (例如 760px) ，所以當螢幕可以顯示的範圍較大時 (1024 x 768) ，你就會看到右邊有一大塊空白的區域了。
傳統的作法，都是用表格排版來解決這種問題。但是表格畢竟不是用來排版的，而且一但使用表格排版，頁面的版型就定死了，毫無靈活度可言；因此我將把表格排版這項解決方案丟到垃圾筒，改以 CSS 作為我排版的利器。
調整 HTML
如何用 CSS 正確實作出固定寬度且置中的版型呢？我們有兩種方式可以達到這樣的目的。不過在此之前，我們必須先將所有的網頁內容用一個 &lt;div&gt; 標籤包起來，就像下面這樣：
&lt;html&gt;
&lt;head&gt;[略]&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
[網頁內容]
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
我們指定這個 &lt;div&gt; 標籤的 id 屬性為 container ， id 屬性在整個頁面裡必須是唯一的。雖然大部份瀏覽器不限制頁面裡的標籤可以擁有重覆的 id 屬性，但我不建議這麼做，因為透過 JavaScript (ECMA Script)  的 document.getElementById 抓取標籤元素時，重覆的 id 屬性會造成混亂。
第一種方法
第一種方式純粹使用 CSS 屬性來控制版面置中，請看下面的 CSS ：
html, body {
  margin: 0;
  text-align: center;
}
#container {
  position: relative;
  margin: 0 auto;
  width: 760px;
  text-align: left;
}
我們一行一行解釋：
html, body - 這行表示我們對 &lt;html&gt; 及 &lt;body&gt; 標籤做樣式設定。大部份瀏覽器的頁面內容都是以 &lt;body&gt; 為基準，但某些瀏覽器則是以 &lt;html&gt; 為基準，所以我兩個都指定。
margin: 0; - 一般我們都會在 &lt;body&gt; 加上 topmargin="0" 及 leftmargin="0" ，使得頁面內容和瀏覽器邊緣間沒有空隙。但是 topmargin 和 leftmargin 屬性都已被 W3C 廢棄了，所以我改用 CSS 的 margin 屬性來指定。 
text-align: center; - 重點之一，有些瀏覽器無法很正確地使版型置中，透過這個屬性，我們可以使 &lt;body&gt; 內的所有內容置中。注意，我說的是所有內容，包含所有的標籤、文字、圖片等，所以等會我們必須把它調整回來。
#container - 這行表示我們將會一個 id 屬性值為 container 的標籤做設定。也可以這樣寫： div#container ，如此就很明確地指定是一個 id 屬性值為 container 的 &lt;div&gt; 標籤。
position: relative; - 將元素指定為相對定位。其實這行有沒有並無太大關係，但為了相容性，我還是指定了這個屬性。絕對定位和相對定位的差別我以後有空再說明。
margin: 0 auto; - 重點之二，這會使得 div#container 這個元素與 &lt;bod&gt; 標籤的上下邊界空間設為 0 ，而左右兩邊則自動調整。完整的寫法是 margin: 0 auto 0 auto; ，不過如果有重覆的設定時， CSS 可以讓我們只寫一次，因此 0 auto 0 auto 就可以等於 0 auto 。
width: 760px; - 這就是我們所要指定的版面寬度囉。
text-align: left; - 重點之三，因為我們在 &lt;body&gt; 標籤中指定所有內容置中，而這個設定讓我們把 &lt;div&gt; 標籤裡的所有內容又回到靠左對齊的狀態。 
註：這種方法在 Dreamweaver 裡能夠正常顯示，但是下面的第二種方法就不行了。
第二種方法 
第二種方式採用位移來控制版本的置中，它的 CSS 如下：
html, body { margin: 0; }
#container {
  position: relative;
  left: 50%;
  margin-left: -380px;
  width: 760px;
}
這個方式也可以達到同樣的效果，我們挑重點解釋：
html, body { margin: 0; } - 我們在這裡拿掉了 text-align: center ，因為第二種方式沒有用到自動調整邊界。另外 CSS 可以讓我們把多個屬性設定值寫在一行裡，但是如果屬性值太多的話，建議你還是拆開成多行，比較容易維護。
 #container - 我們拿掉了margin: 0 auto; 及 text-align: left; 。因為第二種方式是以位置的移動來達到置中的目的，所以我們加入了 left: 50%; 及 margin-left: -380px; 。注意我們保留了 position: relative; ，這樣 left 屬性才會有作用。
left: 50%; - 將 div#container 的左邊的相對位置，置於畫面的中央。圖 1 是原本 div#container 應該在的位置，當我們設定 left: 50% 後，就會像圖 2 一樣了。

margin-left: -380px; - 這個設定比較難解釋，簡單說就是把整個元素的左邊界往回拉 380px (記得負值就是往回拉的意思) 。如圖三所示，我們可以看到整個版面置中了。

註：第二種方法在瀏覽器可視範圍比頁面寬度還小時，在 div#container 的左邊部分就會被遮住了，所以使用上要特別小心。
OK ，這兩種方式就能夠使版面置中。而且因為我們將所有頁面內容包在 div#container 元素裡，所以在它裡面的所有元素，其絕對位置都會以 div#container 為基準。因此以後如果有下拉式選單的話，也不用擔心它會跑位囉。
]]>
	</description>
<language>zh-tw</language>
<generator>Roodo Blog System</generator>
<copyright>All Rights Reserved</copyright>
<atom:link href="http://blog.roodo.com/jaceju/archives/77741-comment.xml" rel="self" type="application/rss+xml" />
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[您這一篇教學 幫了我好大的忙!]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-10013309</guid>
		<category>文章回應</category>
	<pubDate>Mon, 30 Apr 2007 11:10:15 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[To 娃娃：

抱歉啦~~ 一時又忘記了，立刻處理~~]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557983</guid>
		<category>文章回應</category>
	<pubDate>Wed, 08 Nov 2006 09:17:08 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[版主你好，你的教學是我瀏覽過這麼多＝　＝
尋尋覓覓以後，最最最清楚且讓人懂得ＷＨＹ的！
真的很感謝你！！
最後＠＂＠拍謝呢，還是要請您修正一下圖＝　＝
他們又失連惹＞＜＂我很想看看這篇的圖的解說，
一直對這部份很不懂！感謝︿︿＂]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557981</guid>
		<category>文章回應</category>
	<pubDate>Wed, 08 Nov 2006 02:24:23 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[嗯，第二種方式是比較投機的技巧。一般來說，第一種方式比較適用於大多數主流瀏覽器。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557979</guid>
		<category>文章回應</category>
	<pubDate>Sat, 24 Dec 2005 12:58:03 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[第二種方法會有一個問題, 就是當瀏覽器視窗的寬度比 div#container 小的時候, div#container 整個區塊的左邊部分會被切截掉, 且連水平的捲軸移動都無法看到.(FireFox 還可以透過水平捲軸看到右邊, IE 6 就有點慘, 連水平捲軸都沒有)]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557977</guid>
	<author>ogen@ms21.hinet.net(ogen)</author>	<category>文章回應</category>
	<pubDate>Sat, 24 Dec 2005 02:38:43 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[試試看呀~ 實際動手做你就更清楚囉。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557975</guid>
		<category>文章回應</category>
	<pubDate>Thu, 18 Aug 2005 21:32:08 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[請問第二個方法把margin-left換成-50%可以嗎？]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557973</guid>
	<author>bingoppp@yahoo.com.tw(Mosquito)</author>	<category>文章回應</category>
	<pubDate>Thu, 18 Aug 2005 21:16:51 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[你寫的真的很清楚
謝謝你喔
把我一些觀念釐清了
]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557971</guid>
		<category>文章回應</category>
	<pubDate>Fri, 05 Aug 2005 15:39:49 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[換了網頁空間後，忘了把圖補回來，已經修正了。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557969</guid>
		<category>文章回應</category>
	<pubDate>Wed, 29 Jun 2005 11:34:25 +0800</pubDate>
</item>
<item>
	<title>回應：如何正確實作出固定寬度且置中的版型</title>
	<description><![CDATA[補充一點，第一種方法在 Dreamweaver 裡能夠正常顯示；第二種方法 #container 會跑位。]]>
	</description>
	<link>http://blog.roodo.com/jaceju/archives/77741.html</link>
	<guid>http://blog.roodo.com/jaceju/archives/77741.html#comment-4557967</guid>
		<category>文章回應</category>
	<pubDate>Tue, 31 May 2005 23:47:15 +0800</pubDate>
</item>
</channel>
</rss>