In the source code below of the example page of this site:\[code\] http://6.470.scripts.mit.edu/css_exercises/exercise5.html<head><style>body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #bbbbbb;}#container{ width:1000px; background-color:#dddddd; text-align: center; margin: auto;}#navigation{ display: inline-block; margin-top:20px;}#navigation_bar{ list-style-type:none; margin:auto; padding:0; overflow:hidden; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}#navigation_bar li{ float:left;}#navigation_bar a:link, #navigation_bar a:visited{ display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#993738; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase;}</style></head><body><div id="container"> <div id="header"> <h1 id="big_title">6.470 Web Programming Competition</h1> </div> <div id="navigation"> <ul id="navigation_bar"> <!--On a real website, you would put the URL you want to navigate to inside href--> <li><a href="http://stackoverflow.com/questions/15726187/#home">Home</a></li> <li><a href="http://stackoverflow.com/questions/15726187/#materials">Materials</a></li> <li><a href="http://stackoverflow.com/questions/15726187/#competition">Competition</a></li> <li><a href="http://stackoverflow.com/questions/15726187/#pastyears">Past Years</a></li> <li><a href="http://stackoverflow.com/questions/15726187/#about">About</a></li> </ul> </div></body>\[/code\]The navigation bar is centered only when display: inline-block is used in div#navigation. If it is removed, then the navbar is not centered at all. Even the margin: auto for ul#navigation_bar is not helping. If a width is mentioned for the ul##navigation_bar then it is able to center the navbar. My question is, how is the whole thing working ie how does display:inline-block makes the navbar center and how does the fixed width also make the ul#navigation_bar also work? And how does margin: auto have no effect like in other cases?Thanks a lot for help clarifying.
css: inline-block is helping center the nav bar - need understanding of the working
- Thread starter Trish
- Start date