Elliott Davidson Elliott Davidson - 1 year ago 67
CSS Question

How to horizontally centre align a ul within a div

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

Answer Source

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;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download