html - 仅编辑被文本 : html/css 包围的图像的边距

标签 html css css-position vertical-alignment

好吧,我有一个里面有图像的文本,就像这样

<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/

相关文章:

html - 响应式菜单 (Bootstrap) - 内联按钮

javascript - 图表在 # 个链接期间消失

css - 悬停后如何使未知宽度的内联 block 元素保持在中心位置

html - 具有高度的固定列表

javascript - JS : Uncaught TypeError: onlcick is not a function

html - 水平站点宽度超过 4000 像素的 Css3 动画问题

javascript - 使用脚本将 HTML Web 应用表数据发送回 Google 表格

html - 重置样式表,仍然有空白

javascript - 页面加载后菜单跳转

html - CSS - 绝对位置受 sibling 的边距影响