How to center an unorganized list within a navigation bar

Question

So i'm currently working on building my own website but ran into some trouble when it came to centering my actual ul within my navigation bar. The nav bar is already centered and fine but i am trying to center the actual ul and still keep it left aligned. I am using Brackets text editor. Any Help ?

Thanks in advance and heres my CSS code:

 body { background-color: #333333; margin: 100 0; } .mainimg { border-style: solid; width: 80%; margin: 10 auto; } .mainimg img {} .nav-bar { text-align: center; width: 85%; margin: 0 auto; } .nav-bar ul { width: 100%; list-style-type: none; margin: 0 auto; padding: 0 auto; overflow: hidden; background-color: #333333; } .nav-bar li { float: left; width: 10%; } .nav-bar li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } .nav-bar li a:hover { background-color: #111111; }

 <html> <head> <title>Satori</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="imageslider"> <img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left"> <img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw"> <img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right"> </div> <div class="nav-bar"> <ul> <li><a href="">Station</a></li> <li><a href="">Search</a></li> <li><a href="">Shop</a></li> <li><a href="">Films</a></li> <li><a href="">Art</a></li> <li><a href="">Podcast</a></li> <li><a href="">Blog</a></li> <li><a href="">Games</a></li> <li><a href="">Music</a></li> </ul> </div> </body> </html>

Answer 1

Update below css part

.nav-bar li {
 display:inline-flex; /* OR display:inline-block */
 /* float:left; */
/* width: 10%; */
}

 body { background-color: #333333; margin: 100 0; } .mainimg { border-style: solid; width: 80%; margin: 10 auto; } .mainimg img {} .nav-bar { text-align: center; width: 85%; margin: 0 auto; } .nav-bar ul { width: 100%; list-style-type: none; margin: 0 auto; padding: 0 auto; overflow: hidden; background-color: #333333; } .nav-bar li { display:inline-flex; /* OR display:inline-block */ /* float:left; */ /* width: 10%; */ } .nav-bar li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } .nav-bar li a:hover { background-color: #111111; }

 <div class="imageslider"> <img src="images/SATORI%20ARROW%20LEFT.png" width=100px alt="left"> <img class="mainimg" src="images/satori-for-web-background.png" alt="oauihgoiw"> <img src="images/SATORI%20ARROW%20RIGHT.png" width=100px alt="right"> </div> <div class="nav-bar"> <ul> <li><a href="">Station</a></li> <li><a href="">Search</a></li> <li><a href="">Shop</a></li> <li><a href="">Films</a></li> <li><a href="">Art</a></li> <li><a href="">Podcast</a></li> <li><a href="">Blog</a></li> <li><a href="">Games</a></li> <li><a href="">Music</a></li> </ul> </div>

How to center an unorganized list within a navigation bar

Question

1 answers

solution1
0 2017-06-26 06:03:41

How to center an unorganized list within a navigation bar

Question

1 answers

solution1 0 2017-06-26 06:03:41

solution1
0 2017-06-26 06:03:41