CSS text-align 水平對齊

CSS text-align 的用途是水平對齊，可以設定靠左、靠右、置中甚至是使左右對齊本文等特性，要注意的是 text-align 只能設定水平對齊，無法設定垂直方向的對齊，以下列出常見的對齊方式。

• text-align:left;　//向左對齊
• text-align:right;　//向右對齊
• text-align:center;　//置中
• text-align:justify;　//使左右對齊本文
• text-align:inherit;　//繼承父元素的 text-align 屬性

靠左靠右與置中比較單純，我們來看看 text-align:justify 這個左右對齊本文的屬性，此屬性不一定會單純的完美對齊，依本文寬度、文字甚至瀏覽器的特性而決定，部分瀏覽器使用 text-align:justify 對齊的時候，會有不等的文字間空格出現，使用時請多嘗試幾個瀏覽器看看。

最後一項 text-align:inherit 比較不建議使用，因為在 IE8（含）以下版本的 IE 瀏覽器並不支援此項屬性，未來會不會支援也還不清楚，為了避免排版上出問題，還不要用比較好，一點小小建議囉！

CSS text-align 置中對齊範例

<div style="text-align:center;background-color:pink;width:200px;height:60">這裡是文字</div>

這裡是文字

為了範例呈現效果比較明顯，所以我們在區塊（DIV）加上了粉紅背景色（background-color），並設定寬度 200px 與高度 60px，這樣看起來比較清楚，文字已經置中對齊，不過垂直方向並沒有置中，我們有另一篇關於垂直置中的技巧分享，請參考延伸閱讀。

你可以把此範例中的 text-align:center 改成其它屬性如 left、right 或 justify 試試看。