html - 网站的 .PNG Logo 在移动/响应 View 中偏离中心，但仅在桌面浏览器 View 中正常

Question

Here's the website in question .如果您在桌面浏览器(我试过 Chrome、Firefox、Edge)上查看该网站，它看起来不错。但是，当您在任何移动设备上查看它时，顶部 Logo 会偏离中心并且位于错误的位置 - screenshot .

这是我的 index.html 文件中的相关代码行:

<header id="header">
    <div class="logo">
        <span class="imagetop"><img src="images/TTM-Logo3.png" alt="" /></span>
    </div>

这是我的 .css 文件中的代码:

.imagetop {
        position: relative;
        transform: translate(-50%, -50%);

几天前我以为我已经解决了这个问题，但不幸的是它又回来困扰着我。我什至尝试回滚到该网站的先前版本，但仍然遇到同样的问题。

有什么想法可以让 Logo 在桌面和移动设备上正确居中显示吗？

Answer 1

这是因为响应式 width 和 height 覆盖了默认样式(736px 及更小)。重置代码应该使它恢复正常。您只需设置以下内容:

@media screen and (max-width: 736px) {
    #header .logo {
        width: 100%;
        height: auto;
        line-height: initial;
    }
}