18

我有这段 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 即可。有什么建议吗？

4

5 回答 5

26

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

编辑 - -

现在最好使用 flexbox 来做这件事：

.my-a-class {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
于 2013-02-01T10:43:28.600 回答
3

将图像与文本对齐：

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

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

于 2013-02-01T10:44:15.540 回答
1

设置a img{vertical-align:middle;}或.my-img-class{vertical-align:middle;}它应该工作。

于 2013-02-01T10:42:00.433 回答
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;
}
于 2013-02-01T10:45:36.313 回答
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>
于 2014-08-26T14:43:01.990 回答