CSS text-align 水平對齊 - Wibibi

CSS text-align 的用途是水平對齊，可以設定靠左、靠右、置中甚至是使左右對齊本文等特性，要注意的是text-align 只能設定水平對齊，無法設定垂直方向的對齊， 首頁 HTML HTML5 PHP MySQL CSS CSS3 JavaScript 軟體介紹 其它 Home › CSS › CSStext-align水平對齊 CSStext-align水平對齊 CSStext-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瀏覽器並不支援此項屬性，未來會不會支援也還不清楚，為了避免排版上出問題，還不要用比較好，一點小小建議囉！CSStext-align置中對齊範例這裡是文字這裡是文字為了範例呈現效果比較明顯，所以我們在區塊（DIV）加上了粉紅背景色（background-color），並設定寬度200px與高度60px，這樣看起來比較清楚，文字已經置中對齊，不過垂直方向並沒有置中，我們有另一篇關於垂直置中的技巧分享，請參考延伸閱讀。

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

延伸閱讀CSS文字垂直置中技巧CSSDIV區塊標籤的使用教學CSSbackground背景屬性介紹CSSbackground-color屬性與用法介紹CSSvertical-align屬性 您可能會想看 CSSspan區域文字字型設計 CSSspan區域邊框顏色與樣式設計 CSSspan區域背景顏色設計 CSSdisplay:inline-block效果 CSSa連結樣式效果設計 用CSS設計出三角形圖案 CSSdisplay屬性 CSSboxmodel盒子模型 CSSlist-style列表屬性 用CSS設計HTMLbutton按鈕大小 今日熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 即時熱門文章 MySQLSELECTWHEREdate等於上個月的條件判斷寫法 MySQLSELECTWHEREdate等於本月的條件判斷寫法 MySQLSELECTWHEREdate等於昨天的條件判斷寫法 PHPmysqli_set_charset函式設定字符編碼 PHP:mysqli_connect資料庫連線函式 MySQLSELECT判斷今天之前或某天之前的日期條件判斷寫法 MySQLSELECTWHEREdate等於今天的條件判斷寫法 HTMLdiv標籤 CSSAttributeSelectors屬性選擇器 替CSSspan區域增加陰影效果 ©Copyrightwibibi.com網頁設計教學百科基礎的網頁設計規劃、資料庫與程式設計Since2012