网站的 .PNG 徽标在 mobile/responsive 视图中偏离中心，但仅在桌面浏览器视图中正常

Question

Here's the website in question. If you view the site on a desktop browser (I've tried Chrome, Firefox, Edge) it looks fine. But when you view it on any mobile device the top logo is off-centred and in the wrong spot- 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%);

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

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

Answer 1

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

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