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

Popular posts from this blog

javascript - Google App Script ContentService downloadAsFile not working -

javascript - Function overwritting -

php - Find a regex to take part of Email -