默认情况下,与文本对齐的图像底部与行的底部对齐,并且与上一行的底部顶部对齐,这会改变文本间距:
我想将图像置于其文本行的中心(例如使用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>