Elliott Davidson Elliott Davidson - 3 months ago 9
CSS Question

How to centre align a ul with in a div

Im not sure why this text-align centre isn't taking effect. I've looked up other tutorials and I'm applying the textalign: centre 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.

<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>


Here is a copy of my CSS code:

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

Answer

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

Comments