CSS：不能以UL为中心

Question

在this page上，我有一个页脚菜单＃menu-footer-menu; ＆＃34;关于 - 选择你的城市 - 如何行走......＆＃34;由Wordpress生成。

<div class="menu-footer-menu-container">
  <ul id="menu-footer-menu" class="menu">
    <li id="menu-item-143"><a href="#">About</a></li>
    <li id="menu-item-151"><a href="#">Select Your City</a></li>
    <li id="menu-item-162"><a href="#">How Walks Work</a></li>
    <li id="menu-item-160"><a href="#">FAQs</a></li>
    <li id="menu-item-166"><a href="#">Blog</a></li>
    <li id="menu-item-153"><a href="#">Partners</a></li>
    <li id="menu-item-154"><a href="#">Press</a></li>
    <li id="menu-item-144"><a href="#">Privacy Policy</a></li>
    <li id="menu-item-145"><a href="#">Site Map</a></li>
    <li id="menu-item-146"><a href="#">Terms &#038; Conditions</a></li>
  </ul>
</div>

我想把这个菜单放在中心位置。

我尝试了以下CSS，但它没有工作：

div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: inline-block !important;
}
ul#menu-footer-menu li {
  display: inline-block !important;
  margin-right: 14px;
  margin-right: 1rem;
}

Answer 1

使用以下css代替您拥有的内容。 我刚刚更改了ul＃menu-footer-menu.menu的显示以阻止其他任何内容。

div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: block !important;
}
ul#menu-footer-menu li {
  display: inline-block !important;
  margin-right: 14px;
  margin-right: 1rem;
}

Answer 2

您需要添加一个宽度为100％的包装元素，以使div居中。

像：

<div class="wrapper">
<div class="menu-footer-menu-container">
  ...
</div>


.wrapper{ width:100% }

Answer 3

使用display:block代替inline-block

ul#menu-footer-menu.menu {
  list-style-type: none;
  width: 760px !important;
  margin: 0 auto !important;
  display: block !important;
}

Answer 4

尝试添加CSS样式：

.menu-footer-menu-container
{
  text-align: center;
}

Answer 5

你有两种方法可以做到这一点

1. 宽度降级中心标记

      <center>
       <ul>
         ...
       </ul>
      </center>
   

2. 创建另一个div来强制中心

   .center {margin：auto; text-align：center; }

      <div class="center">
       <ul>
         ...
       </ul>
      </div>
   

注意：标记必须是内联块。

1. width text-align：center;

      ul{ text-align: center; }
   
      <center>
       <ul>
         ...
       </ul>
      </center>
   

Answer 6

在CSS中添加另一个样式text-align：center到＃footer-menu。