强制居中页脚并不成功

Question

我想将页脚居中，并使用 CSS 编写此代码：

.footer {
    background: linear-gradient(180deg, rgba(42,53,65,1) 0%, rgba(0,67,121,1) 150%); 
    padding:20px;
    z-index: 70;
    font-size:9px;

    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;  
    
    border: 0.1em dotted red;
}   
.fullWidthFooter, .fullWidthFooter#nav {
    width: 100% !important;
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    
    border: 0.1em dotted brown;
}
#menu-footer-menu, #menu-footer-menu-footer-links-english { 
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important; 
    width: 900px important;
    
    border: 0.1em dotted yellow;
}
#menu-footer-menu ul {
    display: inline-block;
    
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
}   
    
<footer class="footer">
    <div id="inner-footer" class="row">
        ::before
        <div class="fullWidthFooter">
            <nav role="navigation">
                <ul id="menu-footer-menu" class="menu"><li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339">....</li>
                    <li id="menu-item-336" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-336">....</li>
                    <li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343">....</li>
                    <li id="menu-item-349" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-349">....</li>
                </ul>                           
            </nav>
        </div>  
    </div>
</footer>

正如你在 CSS 中看到的那样，我尝试强制将其显示为居中，但事实并非如此，它仍然位于左侧，正如你在屏幕截图中看到的：

也许强制使用 0 值不是正确的方法？... 在遵循评论中所说的内容后，我认为这是正确的方法：WordPress 主题的中心页脚

请指点，谢谢！干杯！

Answer 1

据我理解你的问题，你需要将带有黄色边框的div居中。

1. 为此，您需要删除在

   #menu-footer-menu, #menu-footer-menu-footer-links-english

   处应用的宽度属性，希望它对您有用。

2. 第二件事，您可以做的是将这些属性应用到上面的选择器。

   #menu-footer-menu，#menu-footer-menu-footer-links-english { 显示：柔性； 调整内容：居中； }