CSS: can't center a UL

Question

On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by 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>

I want to center this menu.

I tried the following CSS but it didn't work:

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

Add one more style text-align:center to #footer-menu in css.

Answer 2

Use following css instead of what you have. I just changed display for ul#menu-footer-menu.menu to block nothing else.

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 3

You need to add one wrapper element with a width of 100% to center your div in.

Like:

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


.wrapper{ width:100% }

Answer 4

Use display:block instead of inline-block

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

Answer 5

Try to add CSS Style :

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

Answer 6

You have two ways to do it

1. width degradation center tag

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

2. Create another div to force the center

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

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

Note: The tag must be inline-block.

3. width text-align:center;

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