移动端视图下WordPress网站Logo居中调整求助

方案1：自定义CSS（最直接有效） #

• 登录WordPress后台，进入「外观」→「自定义」→「额外CSS」
• 添加以下媒体查询代码，针对移动端设备调整Logo位置：

/* 针对屏幕宽度≤768px的移动端设置Logo居中 */
@media only screen and (max-width: 768px) {
    /* 替换为你网站Logo对应的容器类/ID，可通过浏览器检查工具获取 */
    .site-header .custom-logo-link {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    /* 确保Logo图片本身居中（若需要） */
    .site-header .custom-logo {
        margin: 0 auto;
    }
}

• 提示：如果代码不生效，右键移动端页面的Logo选择「检查」，找到元素的实际类名或ID替换代码中的选择器即可。

方案2：利用主题内置设置 #

• 部分主流WordPress主题（如Astra、GeneratePress）在「外观」→「自定义」的「布局」→「标题」模块中，提供了移动端专属的Logo位置设置，直接选择「居中」即可。
• 注意：部分主题会把移动端布局选项放在单独的「移动端」标签下，需仔细查找。

方案3：解决CSS优先级或缓存问题 #

• 若自定义CSS未生效，可能是主题原有样式优先级更高，可尝试添加!important（仅必要时使用）：

@media only screen and (max-width: 768px) {
    .site-header .custom-logo-link {
        display: block !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
}

• 修改后若页面无变化，检查是否启用了缓存插件（如WP Rocket、W3 Total Cache），清空插件缓存和浏览器缓存后再测试。

内容的提问来源于stack exchange，提问作者chanwoo Hwang