星期四, 9月 25, 2008

文字和icon放一起時,圖文對齊的問題

文字和icon放一起時,圖文對齊的問題
最近企畫在驗收專案時,發現當有圖文混排時,往往圖示與文字無法對齊在一個視覺基線上,尤其是當文案中包含中英文字和數字,甚至有輸入框或按鈕一併出現時,狀況更明顯。

問題的原因很多:圖示的高度尺寸不一致、中英文字混排、包含輸入框或按鈕等...

解決的方式:

1.將圖示的高度統一。

2.於CSS當中,對IMG設定以下參數

img {position: relative;top: 5px;margin-top: -5px;}


也有人這麼做:

如果要文字垂直對齊欄位的中央,可將height和line-height的值,設為相同。例如:
p {height:30px;line-height:30px;}
張貼留言