html - Trying to center "navBar", but width is automatically setting to 100% -
i trying center navigation bar @ top of page, navigation bar's width has automatically set 100%.
here html code:
<body> <div class="container"> <div class="navbar"> <li><a href="#">list item #1</a></li> <li><a href="#">list item #2</a></li> <li><a href="#">list item #3</a></li> <li><a href="#">list item #4</a></li> <li><a href="#">list item #5</a></li> </div> </div> </body> here css code:
.container{ width:75%; height:auto; margin:0 auto; } .navbar{ width:auto; height:35px; margin:0 auto; } is there way "navbar" div align in center of body?
firstly, html invalid. li must children of ul
ul , div block-level elements , 100% wide automatically have make them shrink-wrap.
one method use display:inline-block.
then text-align:center on parent element center contents. since have set height on navbar element, assume want same on li.
.container { width: 75%; height: auto; margin: 0 auto; text-align: center; } .navbar { display: inline-block; height: 35px; } .navbar li { display: inline-block; list-style-type: none; } <div class="container"> <ul class="navbar"> <li><a href="#">list item #1</a> </li> <li><a href="#">list item #2</a> </li> <li><a href="#">list item #3</a> </li> <li><a href="#">list item #4</a> </li> <li><a href="#">list item #5</a> </li> </ul> </div>
Comments
Post a Comment