CSS table 置中Table align: centerAlign center tablediv垂直置中Td div center

[CSS]用div讓表格置中@ 生生不息 - 隨意窩

文章推薦指數： 80 %
投票人數：10人

網頁設計師為了版面美觀，時常會想讓網頁的某塊區域置中。

在以前拿表格來排版時，我們可以用以下方式達成目的：

 ... 生生不息這裡是一個跟自己說話的地方，我聽見了嗎？日誌相簿影音好友名片 201306301549[CSS]用div讓表格置中?CSS&HTML網頁設計師為了版面美觀，時常會想讓網頁的某塊區域置中。

在以前拿表格來排版時，我們可以用以下方式達成目的：
網頁內容
網頁內容 不過，以表格排版的話頁面的版型就定死了，毫無靈活度可言；比較好的方法是採用CSS各種特性來排版，請繼續看下去。

彈性寬度 如果你的網頁寬度想依視窗寬度調節（例如訂為視窗寬的80%），那麼便可以採用這種方式。

首先我們必須先把整個網頁內容用一個div標籤包起來，例如： [略] [網頁內容] 我們指定這個 div 標籤的 id 屬性為 container （依據規範，id 屬性的值在整個頁面裡必須是獨一無二的，不可以重複）。

設定完畢以後，在 head 標籤之中插入此段CSS程式碼： #container{ margin:0auto;width:80%; } 這代表此樣式要套用至 id 屬性為 container 的區塊（#container），區塊寬度為視窗寬的 80%，上下邊界為零、左右邊界則由瀏覽器自動調節（auto）。

如此一來，頁面就會自動置中了。

固定寬度 如果你的版面寬度固定（如760像素），則可以把前例的 width 特性值修改為 760px。

此外對於固定寬度的版面，我們還有另一種設定方式： #container{ position:relative;left:50%;margin-left:-380px;/*760除以-2*/ width:760px; } 這個方式比較奇妙點，position:relative; 代表此區塊將以相對方式，依其母元素（在此例為 body）的位置來定位。

加上這條特性後，由於尚未指定位置，container 會依照預設值擺在母元素的左上角，如圖一所示。

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

第三條 margin-left:-380px; 比較難解釋，簡單說就是把整個元素的左邊界往回拉 380px（區塊寬度 760px 的一半，負值就是往回拉）。

如圖三所示，我們可以看到整個版面置中了。

上上之選/Xuite日誌/回應(0)/引用(1)沒有上一則|日誌首頁|沒有下一則回應 Google贊助 BlogerAds 寫部落格賺錢術 我的另一部落格無商不雅(ASP.NET) 商品推薦 s925517's新文章本站內容已慢慢遷移[日期]單獨求出「民國年份」(c#)[CSS]CSS排版觀念：Position[CSS]在10個步驟內學習cssposition的用法[CSS]基礎CSS標籤語法[CSS]使用px和em的差異[CSS]強制HTML表格內文不超出設定寬度(強制斷行)[CSS]table與div使用vertical-align的排版方法color永遠都不要做的事 流量資訊 s925517's新回應沒有新回應！ 關鍵字 全部展開|全部收合 全部展開|全部收合

請為這篇文章評分？

延伸文章資訊