Menu
Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
I looked on Google and this site and I couldn't find exactly what I was looking for.
What I want is to be able to keep my current style (using <li> with <a>'s inside), and I want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
Anyways, if that doesn't make sense let me know, currently they are just left aligned...here's what I have:
HTML:
<div class="navbar"> <ul> <li><a href="Home">Home</a></li> <li><a href="Discounts">Discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div> CSS:
.navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; margin: 0px; padding: 0px; width: 90%; overflow: hidden; } .navbar li{ float: left; padding: 2px; width: 150px; margin-left: auto ; margin-right: auto ; } I can also include my .navbar a{} if that is necessary. I am very new to CSS so go easy, also I did look all over SO and Google first and couldn't find anything quite like this (although maybe since I am new I don't realize it's the same).
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this, go ahead and link/post that instead, but I would prefer this way as it makes most sense to me.
956
To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container.
Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .
This allows a widthless centered dynamic ul if you don't want to specify 90% width:
<!doctype html> <div class="navbar"> <div id="for-ie"> <ul> <li><a href="Home">Home</a></li> <li><a href="Discounts">Discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div> </div> <style> .navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; margin: 0 auto; padding: 0px; border:1px solid red; display:table; overflow: hidden; } .navbar li{ float: left; padding: 2px; width: 150px; margin-left: auto ; margin-right: auto ; } </style> <!--[if IE]> <style> #for-ie { text-align:center; } #for-ie ul { display:inline-block; } #for-ie ul { display:inline; } </style> <![endif]--> Tested in IE6, FX 3.
EDIT: Alternate style without the extraneous element:
<!doctype html> <div class="navbar"> <ul> <li><a href="Home">Home</a></li> <li><a href="Discounts">Discounts</a></li> <li><a href="Contact">Contact Us</a></li> <li><a href="About">About Us</a></li> </ul> </div> <style> .navbar { width: 100%; margin-left: auto ; margin-right: auto ; background-color: #ABCDEF; } .navbar ul { list-style-type: none; /*to remove bullets*/ text-align: center; padding: 0px; zoom:1; border:1px solid red; overflow: hidden; } .navbar li{ padding: 2px; width: 150px; display:inline-block; } </style> <!--[if IE]> <style> .navbar li { display:inline; } </style> <![endif]--> The proper way to do this these days is to just use Flexbox:
.navbar ul { list-style-type: none; padding: 0; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: nowrap; /* assumes you only want one row */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
