如何仅在手机和平板端将Logo水平居中？（Lekker主题）

首先，你原来的CSS代码存在语法错误，这是导致无效的直接原因：

• .qodef-header-logo-link 后面缺少开启样式的 {
• !important! 多了一个感叹号，正确写法是 !important;

不过即使修正语法，由于主题的Logo容器可能是块级元素或使用Flex布局，text-align可能无法生效。结合你的主题结构，推荐以下两种可行方案：

方案1：使用块级元素自动外边距居中（推荐） #

通过将Logo链接设为块级元素，利用左右自动外边距实现水平居中：

@media only screen and (max-width: 993px) {
    .qodef-header-logo-link {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: fit-content; /* 限制元素宽度，避免占满整行 */
    }
}

方案2：针对Flex布局的父容器调整 #

如果Logo的父容器使用Flex布局，直接给父容器添加居中属性：

@media only screen and (max-width: 993px) {
    .qodef-header-logo {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

额外说明 #

你隐藏按钮的代码语法正确，不会影响Logo居中的样式，无需修改。若以上方案仍无效，可通过浏览器开发者工具（F12）查看Logo元素的实际布局属性，确认是否有更高优先级的样式覆盖，再针对性调整选择器权重（比如增加父元素类名）。

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