1

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

在此处输入图像描述

我想将图像置于其文本行的中心（例如使用vertical-align:middle），但不会扭曲间距：

在此处输入图像描述

如何以与大多数浏览器兼容的方式完成此操作？

作为一个最小的例子，考虑这个标记：

<!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>
4

4 回答 4

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/

然后阅读：内联块在 Internet Explorer 7、6 中不起作用

于 2013-07-16T21:04:25.960 回答
1

我想不出这是个好主意的具体地方。只有，我想，如果图像垂直短于文本。否则就是美学的屠杀。

尝试使图像高度为 1em。或 0.9 厘米。

于 2013-07-16T20:42:29.310 回答
1

另一种解决方案：

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;
}

请注意，两种解决方案都需要知道图像的大小。

我的解决方案（使用“位置：绝对；”）需要知道图像的宽度才能在其后添加文本。

为此，我们只需添加另一个间距等于图像宽度的跨度，请参阅 codePen：http ://codepen.io/loxaxs/pen/mjFxJ/

于 2013-07-16T22:02:49.277 回答
0

通过将img标签位置更改为absolute您可以修复它。

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

更新小提琴

于 2013-07-16T20:42:13.527 回答