Html 垂直对齐定位点内的文本

我有一段HTML：

<a href="href" class="my-a-class>
    <img alt="alt" src="/path/to/image.jpg" class="my-img-class" />&nbsp;My text
</a>

---

我需要垂直对齐“我的文本”，而不影响锚中的图像。我不能添加任何HTML标记，我只需要用CSS来做。有什么建议吗？

为

a img{vertical align:middle；}

或

设置。我的img类{vertical align:middle；}

应该可以工作。

你可以使用

来完成这项工作。my-a-class{lineheight:value}

。将

value

替换为图像的高度

编辑--- 如今，使用flexbox进行以下操作会更好：

.my-a-class {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

---

将图像与文本对齐：

.my-a-class img { vertical-align: middle; }

演示：

尝试以下代码：

a {
    position:relative;
    height:11em;
}
a img{
    position: absolute:
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}

或

---

将图像和图标与定位标记对齐的正确方法是

在css中

a {
   background: transparent url(/images/your_image) scroll no-repeat left center;
   padding: 2px 0px 2px 20px; //fit as you need
}

在HTML中

<a href="url">Text</a>

所以你有一个带有图像的锚，文本应该放在图像的中心？我认为你的解决方案是有效的，但在我的情况下它不起作用（我不知道为什么）@m4t1t0不用担心。它不像其他解决方案那样强大（你必须跟踪你的图像高度），但它在大多数情况下都有效：）最直接的在线答案！感谢使用此功能的用户：如果您的文本足够长，可以跳入第二行，则此功能将无法正常工作……嗨，trainoasis，是的，这是我现在的问题。我的文本有两行显示如果我的文本是自然多行的，除非我将宽度：100%添加到样式中，否则我能使它工作吗？

<a href="url">Text</a>