Html 垂直居中内联图像而不扭曲文本间距_Html_Image

Html 垂直居中内联图像而不扭曲文本间距

html image

Html 垂直居中内联图像而不扭曲文本间距,html,image,Html,Image,默认情况下，与文本对齐的图像底部与行底部对齐，顶部与前一行底部对齐，这会更改文本间距：我希望将图像置于文本行的中心（例如，使用垂直对齐：中间），但不扭曲间距：如何以与大多数浏览器兼容的方式实现这一点作为一个极小的例子，考虑这个标记： <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <

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

我希望将图像置于文本行的中心（例如，使用

垂直对齐：中间），但不扭曲间距：

如何以与大多数浏览器兼容的方式实现这一点
作为一个极小的例子，考虑这个标记：
<!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>


例子
一些文本
一些带有图像的文本
通过将img
标签位置更改为绝对
可以修复它
img {
    position: absolute;
    top: 50%;
}

我想不出这是个好主意的具体地方。我想，只有当图像在垂直方向上比文本短的时候。否则，就是对美学的屠杀
尝试将图像高度设为1米。或者0.9 em.
在您的情况下，我会：
HTML:
小提琴：
然后阅读：
另一种解决方案：
HTML（无更改）：
请注意，这两种解决方案都需要知道图像的大小
我的解决方案（使用“position:absolute；”）需要知道图像的宽度，以便在图像后添加文本
要做到这一点，我们只需添加另一个空格，空格等于图像的宽度，请参见代码笔：您的标记是什么样子的？您只想将其浮动吗？@shubniggurath是的，但浮动仅适用于左侧和右侧，我希望它垂直工作。@DerekS请查看我的编辑。如果您的“普通行”较长，你想让他们在图像后面吗？或者他们是想把单词包装在图片左边一个较小的容器中？也许是因为图片位于最长文本行的末尾？但是，调整图像大小的好处是（虽然这不是我要做的），+1.图像不再以内联方式显示。实际上，我自己刚刚发现了这个技巧。也许你的意思是切换绝对位置和相对位置？“切换…位置”。我不明白。在我的代码中，“position:relative；”，只允许手动将图像居中。（使用“bottom:…px”）。对不起，我的意思是使图像容器成为相对的，而图像是绝对的。
<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>

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

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

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

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

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