好吧,我有一个里面有图像的文本,就像这样
<h1>First<img alt="image" src="../images/middle.png">Name</h1>
现在,我不希望文本位于图像的中心(我知道我可以通过向图像添加 vertical-align 来做到这一点)但我希望文本约为图像的 3.5/4,所以不完全在图像的中间,而是在图像的底部。我决定尝试为图像添加边距顶部,但随后图像和 h1 也向下移动。然后我尝试了
<h1 class="text">First</h1><img alt="image" src"../images/middle.png"><h1 class="text">Name</h1>
这使得第一个 h1、图像和第二个 h1 都出现在不同的行上。然后我尝试使 h1 显示为内联,但然后我可以回到第一个问题,当我在图像上制作 margin-top 时,h1 也会随着图像一起下降。
那么,关于如何使位于文本行内的图像改变其垂直位置而不改变图像周围文本的垂直位置有什么想法吗?
最佳答案
您是否尝试过 所有 CSS 垂直对齐的不同值(基线、文本顶部、文本底部等),看看是否能得到您想要的?
如果没有,请全部尝试 — https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align — 并尝试将它们与在 h1 元素上设置的 line-height 值进行不同的组合。
关于html - 仅编辑被文本 : html/css 包围的图像的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19204440/