Question

默认情况下，与文本对齐的图像与行的底部对齐，并与上一行的底部对齐，这会更改文本间距：

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>

Answer 1

我认为这不是一个好主意的特定地方。我想，只有图像垂直比文字短。否则就会大屠杀美学。

尝试将图像高度设为1em。或者0.9 em。

Answer 2

在你的情况下，我会这样做：

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

Answer 3

另一种解决方案：

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/

Answer 4

通过将img代码位置更改为absolute，您可以修复它。

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

Updated Fiddle

垂直居中的内嵌图像，不会扭曲文本间距

4 个答案: