1. 程式人生 > >css實現圖片與文字底邊對齊

css實現圖片與文字底邊對齊

通常圖片與文字放在一起的時候圖片往往會偏上,通過設定margin-bottom可以達到文字圖片底邊對齊的目的  
我們在做網頁的時候, 會遇到一個圖片和文字位置對不齊的問題.(一般表現在圖片總是比文字高點)  
解決問題最好的辦法:.一個關鍵的屬性: margin-bottom 通過修改圖片的外邊框的底部高度就可以讓文字移動上來.  
做法是把這個值設定為負數.例如我們把下面的16X15的圖片設定它的  
<img src="bottom.gif" style="margin-bottom:-3px">  
   
或者在樣式裡面設定  
img {  
margin-bottom:-3px;  
}  
  
===============第二種方法===================  
文字<img height="40" width="4" src="images/menu02.gif" align="absmiddle"/>文字  
   
AbsBottom 影象的下邊緣與同一行中最大元素的下邊緣對齊  
AbsMiddle 影象的中間與同一行中最大元素的中間對齊  
Baseline 影象的下邊緣與第一行文字的下邊緣對齊  
Bottom 影象的下邊緣與第一行文字的下邊緣對齊  
Left 影象沿網頁的左邊緣對齊,文字在影象右邊換行  
Middle影象的中間與第一行文字的下邊緣對齊  
NotSet未設定對齊方式  
Right影象沿網頁的右邊緣對齊,文字在影象左邊換行  
Top影象的上邊緣與同一行上最高元素的上邊緣對齊  
TextTop影象的上邊緣與同一行上最高文字的上邊緣對齊    
我用第二種方法的 align="absbottom" 實現底邊對齊(360裡面不行);用texttop實現IE、360、谷歌上邊緣對齊

div根據內容自適應寬度,不如使用table進行排版,table是根據內容長度顯示寬度的(div不能設定固定的寬度,否則不能被撐開)