Question

我想要使用此方法垂直居中的图像和文字：

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

在大多数情况下，它在图像和文本方面都很有效。

但是，我想同时制作文本和图像链接（使用<a href="">）并且我希望将图像从大到小调整大小，以便在Retina（例如MacBook）屏幕上看起来很好。

这是我到目前为止所写的一个例子，其中包含虚拟内容和徽标：

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
}

这段代码基本上是我到目前为止（用真实的标识和文字代替）。

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

如果有人能告诉我我做错了什么，我真的很感激帮助 - 为什么图像没有像我希望的那样调整大小并正确居中？

提前感谢您的帮助。

编辑1：由于Stephan Muller，管理得到正确调整徽标大小。请参阅此处：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/

<强> -edit - 这只能修复图像尺寸。垂直居中是一个单独的问题。解决这个问题的最简单方法不是将每个文件放在自己的框中并垂直居中，而是将徽标内容作为一个整体垂直居中，然后依靠图像已有的内在vertical-align属性。

将图片和链接放在一个带有translateY技巧的框中，我将整个内容垂直居中。为了将图像和文本对齐在该框的中心，我只需将vertical-align: middle设置为图像：

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

无法居中（垂直）链接的图像和文本

1 个答案: