时间戳

首页 > 解决方案 > 中心标志与背景图像一起显示

html - 中心标志与背景图像一起显示

问题描述

我正在创建一个仅包含徽标的标题。我将此徽标显示为带有背景图像的 DIV，而不是图像。图像在桌面上很好，左边距为 2vh。我试图将它集中在移动设备上，但由于某种原因它不起作用。

.logoholder {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: 2vh;
    background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png");
    background-repeat: no-repeat;
}

@media only screen and (max-width: 500px) {
.logo {
    height: 8vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: auto;
    margin-right: auto;
    background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png");
    background-position: center
    background-repeat: no-repeat;
}
}
<div class="logoholder">
<a href="/">
<div class="logo">
</div>
</a>
</div>

任何为什么这不起作用的想法将不胜感激。

提前致谢。

标签： htmlcssbackground

解决方案

我确信这样做是有理由的，但就 css 的实际工作方式而言，可能没有很好的理由。通过使用实际图像并将其绝对定位在 div 的中心并将任何其他内容分层放在顶部，您可能会获得更好的结果。这将允许您随意调整图像大小并保持所需的任何位置。

推荐阅读