CSS text-align 水平對齊設計

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

CSS text-align 屬性語法

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

CSS text-align 屬性可用的值

設定值語法
說明
lefttext-align:left;靠左對齊
righttext-align:right;靠右對齊
centertext-align:center;置中對齊
justifytext-align:justify;使左右對齊本文
inherittext-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 排版設計
分享於 2015-02-03 - 更新於 2017-07-31