html - 无法居中(垂直)链接的图像和文本

Question

我有一个图像和文本，我想使用这种方法垂直居中:

position:relative;
top:50%;
transform:translateY(-50%);

在大多数情况下，它适用于图像和文本。

但是，我想创建文本和图像链接(使用 <a href=""> )并且我想将图像从大调整为小以便在 Retina(例如 MacBook)屏幕上看起来不错。

这是我到目前为止所写内容的示例，其中包含虚拟内容和 Logo :

HTML:

<div class="logo">
    <div class="logo-image">
        <a href="#"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/240px-Smiley.svg.png"></a>
    </div>
    <div class="logo-text">
        <a href="#">Logo text here</a>
    </div>
</div>

和 CSS:

.logo {
    height:64px;
    margin:0;
    padding:0;
    float:left;
    background-color:blue
}

.logo-image {
    margin:0;
    padding:0;
    height:32px;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    display:inline-block
}

.logo-text {
    margin:0;
    padding:0;
    position:relative;
    top:50%;
    transform:translateY(-50%);
    display:inline-block
}

这段代码基本上就是我目前所拥有的(替换了真实的 Logo 和文本)。

您可以在 jsfiddle.net 上找到实时版本:http://jsfiddle.net/kLq28h17/

如果有人能告诉我我做错了什么，我将不胜感激 - 为什么图像没有像我希望的那样正确调整大小和居中？

在此先感谢您的帮助。

编辑 1:感谢 Stephan Muller，成功调整了 Logo 的大小。看这里:http://jsfiddle.net/0f5rncqd - 现在我只需要让文本正确居中。

编辑 2 - 已修复! : Stephan Muller 设法解决了这个问题。在此处查看他的评论:http://jsfiddle.net/0f5rncqd/1/

Answer 1

您正在为包含图像的 div 设置样式，但并未以任何方式为图像本身设置样式。图像无法知道如何适应周围环境，所以它不会。

此规则应始终调整图像的大小，以使其周围具有设置大小的任何容器具有最大高度:

.logo-image img {
    max-height: 100%;
}

http://jsfiddle.net/kLq28h17/1/

-编辑- 那只固定了图像大小。垂直居中是一个单独的问题。解决这个问题的最简单方法不是将每个都放在自己的框中并垂直居中，而是将 Logo 内容作为一个整体垂直居中，然后依赖图像的内在 vertical-align 属性已经有了。

通过使用您的 translateY 技巧将图像和链接放在一个框中，我将内容作为一个整体垂直居中。要在该框的中心对齐图像和文本，我只需将 vertical-align: middle 设置为图像:

http://jsfiddle.net/0f5rncqd/1/