在锚点内垂直对齐文本

Question

我有一段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来做到这一点。有什么建议吗？

- m4t1t0

---

所以您有一个带有图像的锚点，文本应该位于图像的中心吗？ - Simon

Answer 1

您可以使用 .my-a-class { line-height: value } 来实现此操作。将value替换为您的图像高度。

编辑 ---

如今，更好的方法是使用flexbox：

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

- boz

---

@m4t1t0 不用担心。它不像其他解决方案那样健壮（您必须跟踪图像高度），但在大多数情况下它都能正常工作 :) - boz

最直接的答案在线上！谢谢 - MohamedEzz

只是为了确保使用此功能的人：如果您的文本足够长以跳到第二行，这将无法正常工作... - trainoasis

嗨，trainoasis，是的，这就是我的问题。我的文本有两行。 - Jerick Allan Sernal Dimaano

如果我的文本自然地跨越多行，除非我添加width: 100％到样式中，否则该如何使其工作？ - Catlover

Answer 2

将图像与文本对齐：

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

Demo: http://jsfiddle.net/Guffa/hz6AV/

- Guffa

Answer 3

Try this code:

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

或者

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

- Jamir Khan

Answer 4

设置为a img{vertical-align:middle;}或.my-img-class{vertical-align:middle;}，它应该可以正常工作。

- Dan Ovidiu Boncut

---

我认为你的解决方案是有效的，但在我的情况下它不起作用（我不知道为什么）。 - m4t1t0

Answer 5

将图像和图标与锚标签对齐的正确方法是

在您的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>

- Pablo V