I am working on my first website and I am a little confused as to how I would center my navigation bar. I have tried defining a width, made sure it was a block element and set margin-left and margin-right to auto but it still isn't centering. Here are my css and html files.HTML:\[code\]<html><head> <title>Test Site</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15694330/styles.css"></head><body> <div class="nav"> <ul> <li><a href="http://stackoverflow.com/questions/15694330/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15694330/#">Forums</a></li> <li><a href="http://stackoverflow.com/questions/15694330/#">Misc</a> <ul> <li><a href="http://stackoverflow.com/questions/15694330/#">1</a></li> <li><a href="http://stackoverflow.com/questions/15694330/#">2</a></li> <li><a href="http://stackoverflow.com/questions/15694330/#">3</a></li> <li><a href="http://stackoverflow.com/questions/15694330/#">4</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15694330/#">Donate</a></li> </ul> </div></body></html>\[/code\]CSS:\[code\].nav > ul { width: 960px; display: block; margin-left: auto; margin-right: auto;}.nav ul { list-style: none; background: #444444; margin: 0px; padding: 0px;}.nav li { float: left; width: 150px; position: relative; background: #444444; text-align: center; border: 1px solid white; height: 30px; line-height: 30px;}.nav li ul li { float: none; width: 140px; text-align: left; padding: 5px; border-top: 1px solid white; line-height: 30px;}.nav li ul { position: absolute; top: 30px; left: 0px; visibility: hidden;}.nav li:hover { background-color: maroon;}.nav li:hover ul { visibility: visible;}.nav a { text-decoration: none; color: white;}.nav li ul { float: none;}\[/code\]
Centering a navigation bar with CSS
- Thread starter reymanx
- Start date