Search code examples
csshtml-listscentering

CSS: can't center a UL

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;
}
Solution

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