垂直居中嵌入圖像，不會扭曲文字間距

默認情況下，與文本一致的圖像與底部對齊，並與上一行的底部對齊，從而更改文本間距：垂直居中嵌入圖像，不會扭曲文字間距

enter image description here

我想代替集中在其文本的線（例如，使用vertical-align:middle）中的圖像，但沒有扭曲間距：

enter image description here

ħ這可以通過符合大多數瀏覽器的方式來完成嗎？

作爲一個小例子，考慮這個標記：

<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    </head> 
    <body> 
    <p>Some text</p> 
    <p>Some text <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle"> with an image </p> 
    </body> 
</html>

來源

2013-07-16 1' '

什麼是你的標記是什麼樣子？ –

你只是想漂浮它嗎？ – shubniggurath

@shubniggurath是的，但浮動只適用於左側和右側，我希望它垂直工作。 –

另一種解決方案：

HTML（無變化）：

<p>A line</p> 
<p>Another line</p> 
<p>Another</p> 
<p>Your (possibly) long line <span class="img-container"><img id="image" src="http://image.org/" /></span></p> 
<p>One more line</p>

CSS（使用定位）：

.img-container { 
    height: 0px; 
    position:absolute; 
} 

#image { 
    margin-left: 1em; 
    position: relative; 
    bottom: 63px; 
}

注意這兩種解決方案需要知道圖像的大小。

我的解決方案（使用「position：absolute;」）需要知道圖像的寬度以在其之後添加文本。

爲了做到這一點，我們只需要添加一個跨度等於圖像寬度的填充，看到codePen：http://codepen.io/loxaxs/pen/mjFxJ/

來源

2013-07-16 22:02:49 loxaxs

我其實自己剛剛發現了這個詭計。雖然也許你的意思是改變絕對和相對的立場？ –

「切換......位置」。我不明白。在我的代碼中，「position：relative;」只是允許手動居中放置圖像。（使用「bottom：... px」）。 – loxaxs

對不起，我的意思是使圖像容器相對和圖像絕對。 –

通過改變img標籤位置absolute您可以修復它。

img { 
    position: absolute; 
    top: 50%; 
}

Updated Fiddle

來源

2013-07-16 20:42:13 Praveen

圖像在這裏不再顯示內聯。 –

我能想到的沒有具體的地方，這是一個好主意。我想，只有圖像垂直比文字短。否則，屠殺美學。

嘗試使圖像高度爲1em。或0.9 em。

來源

2013-07-16 20:42:29 shubniggurath

也許如果圖像是在最長的文本行的末尾？不過，關於調整圖像大小的好處（儘管這不是我要做的）+1。 –

在你的情況，我會做：

HTML：

<p>Some text</p> 
<p>Some text <span class="mid-image"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Rect_Geometry.png/220px-Rect_Geometry.png" style="vertical-align:middle" /></span> with an image</p> 
<p>Some text</p>

CSS：

.mid-image { 
    display: inline-block; 
    zoom: 1; 
    height: 1px; 
} 

.mid-image img { 
    margin-top: -75px 
}

小提琴：http://jsfiddle.net/QgutY/1/

，然後閱讀：Inline block doesn't work in internet explorer 7, 6

來源

2013-07-16 21:04:25 demux

垂直居中嵌入圖像，不會扭曲文字間距

回答

相關問題