Question

好的，所以我的文字内有图片，就像这样

<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＆s将随着图像一起下降。

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

Answer 1

您是否尝试过 all 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;
}

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

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

2 个答案: