對菜鳥程式者而言

排版比寫功能還要難登天

明明寫好的程式run起來都OK

但就是網頁顯示的位置難以入目

 

今天又鑽研出如何讓表格裡的文字水平置中對齊

因為欄位裡有些是放置長字串的資料(資料類型為備忘)

為了分段就在<td>下了style="word-wrap:break-word"

可以讓文字不超過欄位大小

另外在欄位裡的文字串前也下了<pre>

讓文字串可以乖乖折行

但是顯示出來的文字串水平位置為top

整張valign="middle"的table就顯得那幾個欄位歪掉

 不對稱_1   

如果直接<td>裡面加入valign="middle"

是不會產生任何改變的

所以我就想到將該欄位的文字串裡做<div>包裹起來

另外再用CSS調整div的位置

 不對稱_4 

但是顯示出來的欄位還是歪掉的

 不對稱_2    

Try了好幾次後

突然靈機一動

用CSS調整pre的位置來試試看

 不對稱_3

結果顯示

欄位果然乖乖對齊囉!!!

 不對稱_5   

mayfis 發表在 痞客邦 PIXNET 留言(0) 人氣()