垂直对齐锚内的文本

时间:2013-02-01 10:39:29

标签: html css

我有这段HT​​ML:

<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。有什么建议吗?

5 个答案:

答案 0 :(得分:16)

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

编辑---

现在最好使用flexbox:

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

答案 1 :(得分:4)

将图像与文字对齐:

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

演示:http://jsfiddle.net/Guffa/hz6AV/

答案 2 :(得分:2)

设置为a img{vertical-align:middle;}.my-img-class{vertical-align:middle;}它应该有效。

答案 3 :(得分:1)

试试这段代码:

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;
}

答案 4 :(得分:0)

使用锚标签对齐图像和图标的正确方法是

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