How to horizontally centre align a ul within a div

Question

I am not sure why this text-align centre isn't taking effect. I've looked up other tutorials and I'm applying the textalign: center to the div and then display: inline to the ul.

Here is a copy of my HTML code from the browser when inspecting the element as Im actually building a WordPress theme.

 #footer-nav.collapse.navbar-collapse { text-align: center; font-size: 16px; color: #383434; margin-top: 30px; margin-bottom: 30px } div#footer-nav ul#menu-footer { display: inline-block; } ul#menu-footer li { padding: 0px 15px 0px 15px; } 

 <div id="footer-nav" class="collapse navbar-collapse"> <ul id="menu-footer" class="nav navbar-nav"> <li id="menu-item-289" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-289"><a title="About" href="http://localhost/eat-sleep-kayak-wp/about/">About</a> </li> <li id="menu-item-366" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-305 current_page_item current_page_parent menu-item-366 active"><a title="Blog" href="http://localhost/eat-sleep-kayak-wp/blog/">Blog</a> </li> <li id="menu-item-290" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-290"><a title="Newsletter" href="http://localhost/eat-sleep-kayak-wp/newsletter/">Newsletter</a> </li> <li id="menu-item-365" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-365"><a title="Advertise" href="http://localhost/eat-sleep-kayak-wp/advertise/">Advertise</a> </li> <li id="menu-item-288" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-288"><a title="Contact" href="http://localhost/eat-sleep-kayak-wp/contact/">Contact</a> </li> </ul> </div> 

Answer 1

Seems like you are using Bootstrap to build it; the default CSS of bootstrap is setting the navbar to float , then the inline-block property has no effect at all to achieve the center.

This is the default CSS:

.navbar-nav {
    float: left;
    margin: 0px;
}

You can add to your actual code this :

div#footer-nav ul#menu-footer {
    display: inline-block;
    float:none;
}

BootplyDemo

Answer 2

I am using CSS Flex. You can checkout the codepen link.

#footer-nav.collapse.navbar-collapse {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
    flex-direction: row;
  justify-content: center; // This centers the ul
  font-size: 16px;
  color: #383434;
  margin-top: 30px;
  margin-bottom: 30px;
}

div#footer-nav > ul#menu-footer {
    display: inline-block;
}

ul#menu-footer li {
  padding: 0px 15px 0px 15px;
}