您的位置：首页 > 其它

如何正确做出固定宽度且居中的版型

2013-02-24 05:18 330 查看

如何正確實作出固定寬度且置中的版型

2005-04-16

以往，網頁開發者都會碰到這樣的問題：有時候他們會在網頁上擺放一些圖層 (像是滑鼠移過去就會出現的下拉式選單) ，但這些圖層的位置都是絕對的 ( position: absolute ) 。因此只要他們把整個版面置中後，就會發現圖層沒有跟著跑，所以這些網頁開發者僅能選擇把整個版型往左靠。但是為了符合一般瀏覽者的螢幕寬度(800 x 600)，就必須把版面的寬度固定 (例如 760px) ，所以當螢幕可以顯示的範圍較大時 (1024 x 768) ，你就會看到右邊有一大塊空白的區域了。

傳統的作法，都是用表格排版來解決這種問題。但是表格畢竟不是用來排版的，而且一但使用表格排版，頁面的版型就定死了，毫無靈活度可言；因此我將把表格排版這項解決方案丟到垃圾筒，改以 CSS 作為我排版的利器。

調整 HTML

如何用 CSS 正確實作出固定寬度且置中的版型呢？我們有兩種方式可以達到這樣的目的。不過在此之前，我們必須先將所有的網頁內容用一個 <div> 標籤包起來，就像下面這樣：

[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[略]</head>
<body>
<div id="container">
[網頁內容]
</div>
</body>
</html>

我們指定這個 <div> 標籤的 id 屬性為 container ， id 屬性在整個頁面裡必須是唯一的。雖然大部份瀏覽器不限制頁面裡的標籤可以擁有重覆的 id 屬性，但我不建議這麼做，因為透過 JavaScript (ECMA Script) 的 document.getElementById 抓取標籤元素時，重覆的 id 屬性會造成混亂。

第一種方法

第一種方式純粹使用 CSS 屬性來控制版面置中，請看下面的 CSS ：

[code]html, body {
margin: 0;
text-align: center;
}
#container {
position: relative;
margin: 0 auto;
width: 760px;
text-align: left;
}

我們一行一行解釋：

html, body - 這行表示我們對 <html> 及 <body> 標籤做樣式設定。大部份瀏覽器的頁面內容都是以 <body> 為基準，但某些瀏覽器則是以 <html> 為基準，所以我兩個都指定。

margin: 0; - 一般我們都會在 <body> 加上 topmargin="0" 及 leftmargin="0" ，使得頁面內容和瀏覽器邊緣間沒有空隙。但是 topmargin 和 leftmargin 屬性都已被 W3C 廢棄了，所以我改用 CSS 的 margin 屬性來指定。

text-align: center; - 重點之一，有些瀏覽器無法很正確地使版型置中，透過這個屬性，我們可以使 <body> 內的所有內容置中。注意，我說的是所有內容，包含所有的標籤、文字、圖片等，所以等會我們必須把它調整回來。

#container - 這行表示我們將會一個 id 屬性值為 container
的標籤做設定。也可以這樣寫： div#container ，如此就很明確地指定是一個 id 屬性值為 container 的 <div> 標籤。

position: relative; - 將元素指定為相對定位。其實這行有沒有並無太大關係，但為了相容性，我還是指定了這個屬性。絕對定位和相對定位的差別我以後有空再說明。

margin: 0 auto; - 重點之二，這會使得 div#container 這個元素與 <bod> 標籤的上下邊界空間設為 0 ，而左右兩邊則自動調整。完整的寫法是 margin: 0 auto 0 auto; ，不過如果有重覆的設定時， CSS 可以讓我們只寫一次，因此 0 auto
0 auto 就可以等於 0 auto 。

width: 760px; - 這就是我們所要指定的版面寬度囉。

text-align: left; - 重點之三，因為我們在 <body> 標籤中指定所有內容置中，而這個設定讓我們把 <div> 標籤裡的所有內容又回到靠左對齊的狀態。

註：這種方法在 Dreamweaver 裡能夠正常顯示，但是下面的第二種方法就不行了。

第二種方法

第二種方式採用位移來控制版本的置中，它的 CSS 如下：

[code]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 為基準。因此以後如果有下拉式選單的話，也不用擔心它會跑位囉。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航