移动设备中的对齐问题（响应式）答案

【问题标题】：Alignment issue in Mobile device (Responsive)移动设备中的对齐问题（响应式）
【发布时间】：2021-01-26 21:24:05
【问题描述】：

通过使用浏览器中的检查元素选项，我确定了需要更新哪些代码才能将徽标放在中心。我添加了 text-align: center 并且效果很好，所以我更新了源代码中的相同代码以反映相同。但是在添加源代码后它没有得到更新，同时通过检查元素选项添加时工作正常。请帮助我如何实现这一目标

下面添加CSS代码供您参考

@media (max-width: 959px)
.menu-container .logo-container {
    text-align: center;
    position: relative;
    padding: 27px 36px 27px 36px !important;
}

【问题讨论】：

嘿，用 html 添加你的完整代码
我认为代码被在此代码之后编写的一些代码覆盖。再次尝试检查并查看正在应用的代码。
请提供网站链接。
checkmate.health@m4n0
你尝试在什么中间设置标志？

标签： html css wordpress media-queries

【解决方案1】：

您的 CSS 代码似乎无效。应该是这样的：

@media (max-width: 959px) {
    .menu-container .logo-container {
        text-align: center;
        position: relative;
        padding: 27px 36px 27px 36px !important;
    }
}

如果这不起作用，请尝试清除浏览器缓存。

【讨论】：

我已经删除了构造样式表，但它不起作用
确保您正在查看视口宽度低于 959 像素的网站并清除浏览器缓存。否则，可能是选择器错误（不是.menu-container .logo-container）或特异性问题，您可以尝试通过在text-align: center; 后添加`!important` 来解决。

【解决方案2】：

你有一个像它工作正常的类：

@media (max-width: 959px) and (min-width: 768px)
.menu-container .logo-container {
    text-align: center !important;
    float: none !important;
    position: relative !important;
    padding: 27px 36px 27px 36px !important;
}

只需删除 and (min-width: 768px)，您就会得到结果。

所以应该是这样的（或多或少你只需要添加float: none !important;）：

@media (max-width: 959px)
    .menu-container .logo-container {
        text-align: center !important;
        float: none !important;
        position: relative !important;
        padding: 27px 36px 27px 36px !important;
    }

【讨论】：