HTML 水平置中與垂直置中

在做網頁設計的時候常常會用到置中的技巧,無論是文字或圖片,總是會有這樣的需求來配合排版(如果你想採用 CSS 的 DIV 來做排版,可以參考此篇:CSS DIV 置中),此篇文章將 HTML 置中技巧分為水平與垂直兩種不同的方向來做範例。

一、HTML 水平置中
<table width="300" height="80">
 <tr><td align="center">HTML 水平置中</td></tr>
</table>
呈現結果如
HTML 水平置中

你可以看到在 HTML table 中,我們設定了 td 標籤 align="center" 代表的就是 td 內的東西需要水平置中,在某些瀏覽器上甚至連垂直都幫你置中完成,但為了避免某些瀏覽器僅有水平置中,垂直方向靠上或靠下的情況發生,最好加上 valign 來處理垂直方向。

二、HTML 垂直置中
<table width='"300" height="80">
 <tr><td align="center" valign="center">HTML 水平置中</td></tr>
</table>
呈現結果如
HTML 水平置中

範例二中,我們除了 align="center" 之外,還加上了 valign="center" 來宣告垂直方向也必須置中。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012