CSS 2.1 快速導覽 - 水平對齊 text-align

text-align 性質 (property) 為 CSS 中用來設定區塊元素 (block elment) 中內容的水平對齊方式，有以下的關鍵字 (keyword)

  • left
  • center
  • right
  • justify


舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.exampleleft {
    text-align: left;
}
 
.examplecenter {
    text-align: center;
}
 
.exampleright {
    text-align: right;
}
 
.examplejustify {
    text-align: justify;
}
 
/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：text11.css
    功能：示範 CSS 2.1 樣式表的使用
    作者：張凱慶
    時間：西元 2011 年 7 月 */


我們以下面的 HTML 文件載入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<title>網頁標題</title>
<link rel="stylesheet" type="text/css"
      href="text11.css">
</head>
<body>
<div class="exampleleft">
Free your mind.
</div>
<div class="examplecenter">
Free your mind.
</div>
<div class="exampleright">
Free your mind.
</div>
<div class="examplejustify">
Free your mind.
</div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：text10.html
     功能：示範 CSS 2.1 樣式表的使用
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



裡頭 left 為靠左對齊， center 為置中對齊， right 為靠右對齊， justify 在此例中為靠左對齊，實際上 justify 會依行內元素 (inline element) 的方式流動對齊，此例中看不出效果。


中英文術語對照
性質property
區塊元素block elment
關鍵字keyword
瀏覽器broswer
行內元素inline element


您可以繼續參考

JavaScript 範例

文字相關


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.w3.org/TR/CSS21/text.html
https://developer.mozilla.org/en/CSS/text-align
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)