HTML 表格欄位內文字水平置中與垂直置中

範例一先用傳統的HTML 表格 align 以及valign 來設計水平與垂直方向的置中效果，其中align='center' 是水平置中，valign="middle" 則是垂直置中，這兩個功能都要寫在 ... WEBTECH網頁設計教學站 首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器 其它 Home › HTML › HTML表格欄位內文字水平置中與垂直置中 HTML表格欄位內文字水平置中與垂直置中 HTML表格欄位內文字水平置中與垂直置中可以用到不同的技巧，傳統的HTML表格設計屬性中，就有對於欄位內元素的水平置中與垂直置中的功能，分別是align與valign這兩個功能，新一代的網頁設計還有CSS的屬性可以做到相同的效果，分別用到text-align以及vertical-align來處理，本篇就把傳統的HTML寫法以及新的CSS寫法分享給各位讀者，請直接看範例吧！範例一、用傳統的HTMLalign與valign屬性表格欄位內的文字表格欄位內的文字呈現結果表格欄位內的文字表格欄位內的文字範例一先用傳統的HTML表格align以及valign來設計水平與垂直方向的置中效果，其中align='center'是水平置中，valign="middle"則是垂直置中，這兩個功能都要寫在表格欄位的標籤內才有效果。

傳統的HTML語法雖然簡單，但未來還不確定是否會繼續獲得瀏覽器的支援，所以建議還是以CSS來設計會比較妥當，請看範例二的語法。

範例二、用CSS的text-align與表格欄位內的文字表格欄位內的文字呈現結果表格欄位內的文字表格欄位內的文字範例二的程式碼有兩個紅色標註的地方，第一個是在表格

標籤內的「style="text-align:center;"」，這意思是表格欄位內容的元素全部都預設為水平置中，垂直置中的設定在表格欄位

標籤內的「vertical-align:middle;」，眼尖的讀者可能會發現有一個欄位並未設定垂直置中，那是用來比較給各位看，其實現在的新版瀏覽器幾乎都會將文字預設為垂直置中，省去網頁設計師的麻煩。 更多HTML表格設計的技巧修改HTMLTable表格內的文字大小與顏色修改HTMLTable表格的邊框樣式修改HTMLTable表格的邊框顏色修改HTMLTable表格的背景顏色相關CSS語法推薦CSSvertical-align屬性 您可能會想看 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 設計具有超連結效果的HTMLolli自動排序項目清單 設計具有超連結效果的HTMLulli項目清單 HTMLolli列表(數字編號項目清單) HTMLulli列表(項目清單) HTMLtextarea表單多行文字輸入欄位背景圖片設計 HTMLtextarea表單多行文字輸入欄位背景顏色設計 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010