nav.footer{
margin: 0 auto;
}
Domanda
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.
<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.
Soluzione
Altri suggerimenti
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;
}
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.