中文字幕v亚洲日本在线电影,国产成人久久婷婷精品流白浆,国产精品久久久久久久久久久久,亚洲欧美综合区自拍另类,色综合伊人色综合网站

語法：

默認值：start

適用于：塊容器

繼承性：有

動畫性：否

計算值：指定值，除 match-parent 值外

取值：

left：: 內容左對齊。
center：: 內容居中對齊。
right：: 內容右對齊。
justify：: 內容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。（CSS3）
start：: 內容對齊開始邊界。（CSS3）
end：: 內容對齊結束邊界。（CSS3）
match-parent：: 這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值并計算的，計算值可以是 left 和 right 。（CSS3）
justify-all：: 效果等同于 justify，但還會讓最后一行也兩端對齊。（CSS3）

說明：

設置或檢索對象中內容的水平對齊方式。

塊級元素的文本是一些堆疊的線框
大部分瀏覽器要使得 <' text-align '> 的justify兩端對齊生效，需要在漢字間插入有空白，如空格；
塊內的最后一行文本（包括塊內僅有一行文本的情況，這時既是第一行也是最后一行）及被強制打斷的行，其兩端對齊需使用 <' text-align-last '>；
IE瀏覽器下，如果 <' text-align-last '> 要生效，必須先定義 <' text-align '> 為justify；
單行兩端對齊效果變得比較簡單：
css code：
```
li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}
```
html code：
```
<ul>
	<li>我 是 誰</li>
	<li>你 又 是 誰</li>
	<li>世 界 末 日 2012</li>
</ul>
```
以上代碼3個li中的內容都將兩端對齊
需注意幾點：
- 所有主流瀏覽器都支持 text-align 的 justify 屬性值；
- text-align不處理強制打斷的行，也不處理塊內的最后一行，換句話說，如果塊內僅有一行文本（該行既是第一行也是最后一行），這時僅設置text-align:justify無法讓該行兩端對齊；
- text-align-last 是用來處理塊內的最后一行和強制打斷的行的，所以當要設置單行文本兩端對齊時，需使用該屬性；
- 大部分瀏覽器要使得兩端對齊生效，需在文本間插入空白，如空格（如果一行僅有2個漢字，Firefox也需在之間插入空白）；
- 大部分瀏覽器尚不支持 text-align-last；
依據上述的點，要實現單行兩端對齊，可以走2個方向：
1. 由于所有瀏覽器都支持 text-align 的 justify 屬性值，但不全支持 text-align-last，我們可以對非IE及IE7以上瀏覽器使用偽對象生成額外的內容（IE7及以下瀏覽器不支持偽對象，使用text-align-last處理），置于第二行并將其隱藏，這時第一行文本（即要對齊的那個單行文本）可使用text-align:justify來對齊
2. 支持 text-align-last 的瀏覽器，如IE, Firefox使用 text-align-last 處理，不支持的瀏覽器使用如上述方法處理；
所以就目前情況來看，使用第一種方案是比較簡約的，可以輕易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera
查看 css兩端對齊詳解 css兩端對齊效果demo
對應的腳本特性為textAlign。

兼容性：

淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0+	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
start	6.0-11.0	2.0+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
end	6.0-11.0	2.0-3.5	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
end	6.0-11.0	3.6+	4.0+	6.0+	15.0+	6.0+	2.1+	18.0+
justify	6.0-11.0 ^#1	2.0+ ^#2	4.0-40.0 ^#1	6.0+	15.0-27.0 ^#1	6.0+	2.1-4.4.4 ^#1	18.0-39.0 ^#1
justify	6.0-11.0 ^#1	2.0+ ^#2	41.0+	6.0+	28.0+	6.0+	2.1-4.4.4 ^#1	40.0+
match-parent	6.0-11.0	2.0-37.0	4.0-41.0	6.0-8.0	15.0-27.0	6.0-8.3	2.1-4.4.4	18.0-40.0
justify-all	6.0-11.0	2.0-37.0	4.0-41.0	6.0-8.0	15.0-27.0	6.0-8.3	2.1-4.4.4	18.0-40.0

如果要使得兩端對齊生效，需要在單詞之間添加空白，如空格
如果一行僅有2個漢字，較低版本的Firefox也需在之間插入空白

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>text-align_CSS參考手冊_web前端開發參考手冊系列【CSS在線手冊-網站設計教程參考資料】</title>
<meta name="author" content="易網,網站設計,網站制作,網站建設,m.gdywg.com.cn" />
<style>
.test p{border:1px solid #000;}
.left p{text-align:left;}
.center p{text-align:center;}
.right p{text-align:right;}
.justify p{width:200px;text-align:justify;}
.start p{text-align:start;}
.end p{text-align:end;}
</style>
</head>
<body>
<ul class="test">
	<li id="uaukcwsk2o2i" class="left">
		left
		我是左對齊內容
	</li>
	<li id="uaukcwsk2o2i" class="center">
		center
		我是居中對齊內容
	</li>
	<li id="uaukcwsk2o2i" class="right">
		right
		我是右對齊內容
	</li>
	<li id="uaukcwsk2o2i" class="justify">
		justify
		我 是一段可以兩端對齊的文字， 你 仔細看看， 我 的對齊方式都貼著 容器左右的邊緣。
	</li>
	<li id="uaukcwsk2o2i" class="start">
		start
		start效果
	</li>
	<li id="uaukcwsk2o2i" class="end">
		end
		end效果
	</li>
</ul>
</body>
</html>