仅编辑被文本包围的图像的边距:HTML / CSS

Question

好的，所以我有里面有图像的文本，就像这样

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

现在，我

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

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

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

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

Answer 1

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

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

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

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