CSS基礎教學(15)--水平對齊

其實這篇早該寫了，卻一直忘了這個主題 ^_^"

水平對齊的語法如下
text-align: left | center | right | justify | inherit ;

left、center、right 這三個看字面意思就能知道，分別是靠左、置中、以及靠右對齊，效果如下

<DIV style="text-align:left"> 這裡靠左對齊 </DIV> <DIV style="text-align:center"> 這裡置中對齊 </DIV> <DIV style="text-align:right"> 這裡靠右對齊 </DIV>

而 justify 則是跟 Word 裡「左右對齊」的效果一樣，也就是會自動調整字的間距，讓左右都能整齊的對齊，看看下面的例子

<DIV style="text-align:left;width:200px;border:1px solid black;"> 這裡靠左對齊, some words, some words, some words, some words, some words, some words </DIV> <DIV style="text-align:justify;width:200px;border:1px solid black;"> 這裡左右對齊, some words, some words, some words, some words, some words, some words </DIV>

在這個例子中，為了比較容易看到效果，所以 DIV 標籤加上了寬度與框線的語法

上面的 DIV 是靠左對齊，我們可以看到內容並沒有貼齊右邊的框線，甚至第二、第三行的文字結尾也沒有跟第一行的對齊，反觀下面的 DIV，不僅是左邊有對齊，連右邊也是對齊的 (除了最後一行)，這就是 justify 的效果

--gs--
{CSS基礎教學}{對齊}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。