CSS text-align 水平對齊設計 - CSS 學習筆記

CSS text-align 屬性的功能是用來設定網頁容器（例如 DIV 區塊、span 區域、textarea、input type text ... 等）內的文字、圖片或其它網頁元素的水平對齊效果，例如靠左對齊、置中或是靠右對齊，text-align 也是 CSS 水平對齊的標準屬性，幾乎所有主流的瀏覽器都支援 text-align 屬性的功能，我們先來看看 text-align 的語法要怎麼寫，再套用到範例中看實際的效果如何？

CSS text-align 屬性語法

text-align: 對齊方向;

CSS 的 text-align 只要設定好對齊方向就能套用至各種網頁容器中，可用的值整裡如下表，各位讀者朋友們請自行參考看看。

CSS text-align 屬性可用的值

設定值	語法	說明
left	text-align:left;	靠左對齊
right	text-align:right;	靠右對齊
center	text-align:center;	置中對齊
justify	text-align:justify;	使左右對齊本文
inherit	text-align:inherit;	繼承父層的 text-align 屬性值。

※ text-align:justify; 在不同的瀏覽器可能會有不同的效果，請多找幾個瀏覽器做測試。

CSS text-align 水平對齊範例一、靠左對齊

功能：在新視窗開啟程式碼文字檔

實際效果

這是靠左對齊的測試文字

範例一是將 text-align 屬性套用至 DIV 區塊內，接著以下兩個範例都是，靠左對齊使用的是關鍵語法是「text-align:left;」，其他的部份如 border 是用來設計 DIV 區塊的邊框、width 是設計 DIV 區塊的寬度、line-height 則是設計 DIV 區塊內的文字行高。

CSS text-align 水平對齊範例二、置中對齊

功能：在新視窗開啟程式碼文字檔

實際效果

這是置中對齊的測試文字

範例二是範例一的修改，只把「text-align:left;」改為「text-align:center;」就能產生置中對齊的效果，其餘的部份基本上都沒有改變。

CSS text-align 水平對齊範例三、靠右對齊

功能：在新視窗開啟程式碼文字檔

實際效果

這是靠右對齊的測試文字

範例三利用「text-align:right;」來呈現靠右對齊的效果，與前兩個範例相當類似。

更多 CSS 排版設計