•  16-07-2023
  •  | 
  •  

Question

I am simply trying to center a <nav> bar at the bottom of an HTML page, and obviously I'm missing something, as there are many answered questions on this subject, but none of them seem to work for me. I don't think I'm doing anything spectacularly different, but it doesn't work. My <nav> bar always shows up on the left half of the page.

Note that the float:left; in the nav.footer li below makes the individual li float next to each other. If my understanding is correct, it should not make the whole group of them float to the left of the page.

A fiddle

<head>
<title>Fake</title>
<style>
nav.footer
    {
        color:red;
        width:700px;
    }
nav.footer ul
    {
        float:left;
        display: inline-block;
        list-style-type: none;
        color:green;
        font-size:20px;
    }
nav.footer li
    {
        display: inline-block;
        padding: 9px 20px 4px; 
        background-color:#DDDDDD;
        border-left:1px solid #112233;
        border-right:1px solid #112233;
        border-top:2px solid #112233;
        border-bottom:2px solid #112233;
        list-style-type: none;
    }
}
</style>
</head>
<body>
<br>
    <div>
        <nav class="footer">
            <ul>
                <li>1 <a href="#">Batman</a></li>
                <li>2 <a href="#">Superman</a></li>
                <li>3 <a href="#">Ironman</a></li>
                <li>4 <a href="#">Thor</a></li>
                <li>5 <a href="#">Hulk</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

Obviously, I'm still learning.

Was it helpful?

Solution 

nav.footer{
 margin: 0 auto;
}

OTHER TIPS

What's lacking from your code:

nav{width:100%; /* 100% width of the parent container */ }
nav>ul{list-style-type:none;/*still leaves margin and padding*/
    margin:0px;
    padding:0px;
}

Check this Fiddle

add this to your css 

nav.footer{
   margin:0 auto;
}

Add to nav.footer:

 margin:0 auto; // or margin:auto
 margin-bottom:30px; //change this value as you want

margin:0 auto; or margin:auto; centers your nav.
margin-bottom:30px; margin from bottom - 30 pixels.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top