img標籤擺脫的line-height

CSS：

div { 
    height:24px; 
    line-height:24px; 
}

HTML：

<div><img src="image.png"/>Text</div>

現在什麼應該（我認爲）產生是一個24像素高的div，並且文本應該在圖像之後在div中垂直居中對齊。附：圖像是24x24px。但是，它會將行高降低大約12px（將行高減少到12px並不能解決問題）。雖然作品將圖像更改爲12x12px，並將文字放在正確的位置。如果圖像被完全刪除，則文本位於正確的位置。我想我的問題是，爲什麼要這樣做，如果/我該如何修復它。

謝謝，sharf。

來源

2013-05-20 sharf

給vertical-align:middle到的img

div > img 
{ 
    float:left; 
    vertical-align:middle; 
}

Fiddle

來源

2013-05-20 22:34:56 PSL

這修正文本，但現在我的形象被正確對齊（中間）進入被壓低，因此它實際上掛出的DIV一些。編輯：給它一個垂直對齊的頂部修復它適當...對我來說似乎很奇怪。 – sharf

好的，如何http://jsfiddle.net/AFYfH/ – PSL

只是'img {vertical-align：middle; }'似乎工作（[Fiddle]（http://jsfiddle.net/7ZSxg/1/））。爲什麼'float：left'另外呢？ – doppelgreener

嘗試向img添加vertical-align並嘗試用它來按照自己想要的方式獲取它。

來源

2013-05-20 22:34:54 Morfie

最簡單的（但並不總是最好的）解決方案是

img { vertical-align: bottom; }

圖像不甩開線高度;相反，它會導致線框的高度變得大於line-height。原因在於，默認情況下，圖像被視爲字母，尺寸由圖像尺寸指定，位於文本基線上。因此，圖像需要的高度是圖像本身的高度加上文本基線與字體底部之間的距離。

在CSS術語中，「坐在文本基線上」是由默認設置vertical-align: baseline引起的。你可以用各種方式覆蓋它，對垂直位置有不同的影響，但是要注意瀏覽器在執行vertical-align時有很多錯誤，而bottom的值非常簡單，以至於它們可能是正確的。

來源

2013-05-21 05:20:55

img標籤擺脫的line-height

回答

相關問題