不知您是否也會經(jīng)常遇到在做HTML網(wǎng)頁的時候,圖片和文字位置對不齊的問題.別急今天
海東科技就來為您解決這個問題。
1、用table來控制圖片和文字居中對齊 (這樣會因為一個小圖片寫多很多代碼)
2、使用圖片的Align屬性 設(shè)置為align="absmiddle" (但是要知道,標準的W3C中定義的img標簽是不支持Align屬性的) 但是對不同的瀏覽器,也不能一次性解決
以上的方法都不是最好的,實際上可以用CSS來解決這個問題.主要用這個屬性:margin-bottom,通過修改圖片的外邊框的底部高度就可以讓文字移動上來. 做法是把這個值設(shè)置為負數(shù),這個值隨著圖片的大小不同而改變,這樣可以完美處理了。通過修改圖片的外邊框的底部高度就可以讓文字移動上來. 做法是把這個值設(shè)置為負數(shù),這個值隨著圖片的大小不同而改變,這樣可以完美處理了。
下面是效果對比:
使用前:<img src="images/reply_hf.jpg" border="0" />
使用后:<img src="images/reply_hf.jpg" border="0" style="margin-bottom:-3px" />