1. 程式人生 > >html頁面文字左右兩端對齊

html頁面文字左右兩端對齊

  我遇到問題是:看不到效果,無論是英文還是中文,在IE和chrome下都不起作用。這是在網上找到的解決方法 :)

css樣式

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%; 
}

HTML程式碼:

<div class="justify"
>
hello, text justify.</div><br/> <div class="justify"> hello, text justify.<span></span></div><br/> <div class="justify">中 文 兩 端 對 齊</div><br/> <div class="justify">中 文 兩 端 對 齊<span></span></div>

拿來測試的效果圖:
這裡寫圖片描述

從效果圖可以看到,除了要在塊級元素加text-align:justify樣式外,還需要在裡面加一個空的span元素,並應用樣式。另外,對於中文還必須用空格隔開漢字,否則也沒有兩端對齊的效果。英文每個單詞都有空格隔開,所以沒問題。