css實現圖片與文字底邊對齊
阿新 • • 發佈:2019-01-31
通常圖片與文字放在一起的時候圖片往往會偏上,通過設定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不能設定固定的寬度,否則不能被撐開)