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

HTML 表格欄位內文字水平置中與垂直置中可以用到不同的技巧，傳統的 HTML 表格設計屬性中，就有對於欄位內元素的水平置中與垂直置中的功能，分別是 align 與 valign 這兩個功能，新一代的網頁設計還有 CSS 的屬性可以做到相同的效果，分別用到 text-align 以及 vertical-align 來處理，本篇就把傳統的 HTML 寫法以及新的 CSS 寫法分享給各位讀者，請直接看範例吧！

範例一、用傳統的 HTML align 與 valign 屬性

<table border="1">
<tr>
<td style="height:150px;width:200px;" align='center' valign="middle">表格欄位內的文字</td>
<td style="height:150px;width:200px;" align='center' valign="middle">表格欄位內的文字</td>
</tr>
</table>

呈現結果

表格欄位內的文字

範例一先用傳統的 HTML 表格 align 以及 valign 來設計水平與垂直方向的置中效果，其中 align='center' 是水平置中，valign="middle" 則是垂直置中，這兩個功能都要寫在表格欄位的 <td> 標籤內才有效果。傳統的 HTML 語法雖然簡單，但未來還不確定是否會繼續獲得瀏覽器的支援，所以建議還是以 CSS 來設計會比較妥當，請看範例二的語法。

範例二、用 CSS 的 text-align 與

<table style="text-align:center;" border="1">
<tr>
<td style="height:150px;width:200px;vertical-align:middle;">表格欄位內的文字</td>
<td style="height:150px;width:200px;">表格欄位內的文字</td>
</tr>
</table>

呈現結果

表格欄位內的文字

範例二的程式碼有兩個紅色標註的地方，第一個是在表格 <table> 標籤內的「style="text-align:center;"」，這意思是表格欄位內容的元素全部都預設為水平置中，垂直置中的設定在表格欄位 <td> 標籤內的「vertical-align:middle;」，眼尖的讀者可能會發現有一個欄位並未設定垂直置中，那是用來比較給各位看，其實現在的新版瀏覽器幾乎都會將文字預設為垂直置中，省去網頁設計師的麻煩。

更多 HTML 表格設計的技巧

相關 CSS 語法推薦

CSS vertical-align 屬性