CSS兩端對齊語法及代碼實例教學(xué)
我們都對“兩端對齊”并不陌生，在 word、powerpoint、outlook 等界面工具欄里，都有兩端對齊(分散對齊)的功能按鈕，只是平時使用的并不是太多，從編輯習(xí)慣上來說基本都是用左對齊、居中對齊、右對齊的方式來對齊頁面的文本或模塊，而當(dāng)我們在做表單的時候經(jīng)常遇到比如姓名， 手機(jī)號碼， 出生地等等字段長短不一的情況，此時就需要用css讓兩個字段的詞語兩端對齊才能使整體表單看起來比較協(xié)調(diào)，如下圖所示：
CSS 文字兩端對齊
text-align:Justify (火狐);
text-justify:inter-ideograph (IE)
如果有需要，你可以先閱讀CSS text-align屬性部分的內(nèi)容。
text-justify(IE)
基本語法
text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
語法取值
auto? : 默認(rèn)值。允許瀏覽器代理用戶確定使用的兩端對齊法則?
distribute? : 處理空格很像 newspaper ，適用于東亞文檔。尤其是泰文?
distribute-all-lines? : 兩端對齊行的方式與?
distribute? 相同，也同樣不包含兩段對齊段落的最后一行。適用于表意字文檔?
distribute-center-last :? 未實現(xiàn)?
inter-cluster? : 調(diào)整文本無詞間空格的行。這種模式的調(diào)整是用于優(yōu)化亞洲語言文檔的?
inter-ideograph? : 為表意字文本提供完全兩端對齊。他增加或減少表意字和詞間的空格?
inter-word? : 通過增加字之間的空格對齊文本。該行為是對齊所有文本行最快的方法。它的兩端對齊行為對段落的最后一行無效?
kashida? : 通過拉長選定點(diǎn)的字符調(diào)整文本。這種調(diào)整模式是特別為阿拉伯腳本語言提供的。需要IE5.5+支持newspaper : 通過增加或減少字或字母之間的空格對齊文本。是用于拉丁文字母表兩端對齊的最精確格式
應(yīng)用代碼實例
text-align， text-justify樣式了。 text-align 直接設(shè)為 justify 就行了， text-justify 的情況相對比較復(fù)雜 。<form>
<div>
<span>用 戶 名</span>
<input id='username' type="text" name="" />
<strong></strong>
</div>
<div>
<span>密 碼</span>
<input type="password" name="" />
<strong></strong>
</div>
<div>
<span>確 認(rèn) 密 碼</span>
<input type="password" name="" />
<strong></strong>
</div>
<div>
<span>興 趣 愛 好</span>
<input type="text" name="" />
<strong></strong>
</div>
<div class='reg'>
<input type="button" value='點(diǎn)此注冊' name="" />
</div>
</form
/*CSS reset 頂部為css的重置代碼*/ html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,Arial,'宋體';} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} a{text-decoration:none; color:#; outline:none;}/*此處待添加默認(rèn)鏈接顏色*/ a:hover{text-decoration:none;color:#cb1114}; var,em,strong{font-style:normal;} address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;} del,ins{text-decoration:none;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:baseline;} sub{vertical-align:baseline;} legend{color:#000;} input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;} input,button,textarea,select{*font-size:100%;} .clear {clear:both;height:0px;overflow:hidden;} body{-webkit-user-select:none;-webkit-text-size-adjust:none;-webkit-transform-style:preserve-3d;} *{-webkit-tap-highlight-color:rgba(0,0,0,0);} /*form 從此處起為表單的樣式處理*/ form{width:430px;margin:20px auto 0;} div{
width:430px;
height:40px;
line-height:40px;
clear:both;
word-spacing:-1em;/*調(diào)整文本，以防止使用兩端對齊之后字間距過大*/
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
} @media screen and (-webkit-min-device-pixel-ratio:0){/* 兼容chrome*/ div span:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } } span{float:left;width:65px;height:40px;line-height:40px;margin-right:10px;} strong{float:left;width:140px;height:40px;line-height:40px;margin-left:10px;background:#ccf;} input[type=text]{float:left;width:200px;height:20px;margin:10px 0;} input[type=password]{float:left;width:200px;height:20px;margin:10px 0;} input[type=button]{color:#00f;width:100px;height:30px;} .reg{text-align:center;margin:20px auto 0;}
text-align:justify; 和 text-justify:inter-ideograph; 設(shè)置文字兩端對齊的效果，無論是英文還是中文，在IE和 chrome 下都不起作用。解決方法如下：
實例
div.justify
{text-align: justify; width:200px; font-size:15px; color:red;
border:1px solid blue; height:18px;}
div.justify > span
{display: inline-block /* Opera */;
padding-left: 100%; }
嘗試一下 ?
text-align:justify ?樣式外，還需要在里面加一個空的? span? 元素，并應(yīng)用樣式。另外，對于中文還必須用空格隔開漢字，否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開，所以沒問題。
兩端對齊英文文字的 CSS 代碼
中間是英文資料
中間是英文資料
</div>
但是有時候我們需要單詞斷開就在后面加個“-”,怎樣做呢？代碼如下：
中間是英文資料
</div>
--------------------------------------------------------------------
如果上面代碼沒效果，可以參考下面的示例：
實例
div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}
div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }
嘗試一下 ?
text-align:justify ?樣式外，還需要在里面加一個空的? span? 元素，并應(yīng)用樣式。另外，對于中文還必須用空格隔開漢字，否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開，所以沒問題。
更多建議：