0

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

<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 也会随着图像一起下降。

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

4

2 回答 2

1

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

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

于 2013-10-06T01:28:20.930 回答
1

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

<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”有多大，所以相应地调整顶部和左侧的数字

于 2013-10-06T01:29:40.730 回答