仅编辑被文本包围的图像的边距：html / css答案

【问题标题】：edit margin of only the image which is surrounded by text: html / css仅编辑被文本包围的图像的边距：html / css
【发布时间】：2013-10-12 19:44:12
【问题描述】：

好的，我的文字里面有一张图片，就像这样

<h1>First<img alt="image" src="../images/middle.png">Name</h1>

现在，我不希望文本位于图像的中心（我知道我可以通过向图像添加垂直对齐来做到这一点）但我希望文本大约是图像的 3.5/4，所以不完全在图像的中间，而是在图像的底部。我决定尝试在图像上添加一个margin-top，但随后图像和h1也向下移动了。然后我尝试了

<h1 class="text">First</h1><img alt="image" src"../images/middle.png"><h1 class="text">Name</h1>

这使得第一个 h1、图像和第二个 h1 都出现在不同的行上。然后我尝试将 h1 显示为内联，但随后我可以回到第一个问题，当我在图像上制作边缘顶部时，h1 也会与图像一起下降。

那么，关于如何使文本行内的图像改变它的垂直位置而不改变图像周围文本的垂直位置的任何想法？

【问题讨论】：

我可以看看你目前使用的 CSS 吗？
我在玩并更改我的 CSS，尝试从顶部边缘到显示的所有内容：内联到垂直对齐，然后 RwwL 的回答表明我可以使用像素（甚至负像素）进行垂直对齐) 并且效果很好。

标签： html css css-position vertical-alignment

【解决方案1】：

您是否尝试过所有 CSS 垂直对齐的不同值（基线、文本顶部、文本底部等），看看是否有你想要的？

如果没有，请全部尝试 — https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — 并在 h1 元素上设置行高值以不同的组合尝试它们。

【讨论】：

啊，完美，vertical-align: -16px 完美。我们可以通过像素定义垂直对齐，甚至输入负值，这很棒。这非常方便。谢谢。
酷！如果这是用于某种 CMS 模板，只需确保负垂直对齐不会根据元素中的单词咬你。我认为带有后缀的字母可能在您使用时会被截断。
天哪，说得好。是的，它是一个模板。好的，现在我将继续使用负对齐，但我需要找到更好的解决方案：/
写完这篇文章后我在 CodePen 中搞砸了，现在我觉得你还可以；我认为您不会遇到我担心的那个截止下降问题。

【解决方案2】：

在这种情况下，您希望对 <h1> 文本使用绝对定位，否则您不能在同一行上有 2 个 <h1> 标记 - 正如您已经发现的那样，尝试类似

<h1 class="text" class="txt1">First</h1><img alt="image" src"../images/middle.png"><h1 class="txt2">Name</h1>

.txt1{
     position:absolute;
     top:15px;
}
.txt2{
    position: absolute;
    top: 15px;
    left: 150px;
}

显然我不知道你的“middle.png”有多大，所以相应地调整顶部和左侧的数字

【讨论】：

对，这个解决方案也很有效，我只是不想进入绝对定位，但是是的，这将是我不得不求助的。上面的解决方案也很棒。