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 試試看。

Post a Comment

0 Comments