tags:

views:

60

answers:

5
Q: 

Horizontally centering/evenly distributed <li> inside of <ul> inside a <div>

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 couldnt 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 doesnt make sense let me know, currently they are just left aligned...Heres 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 neccesary. I am very new to CSS so go easy, also I did look all over SO and Google first and couldnt find anything quite like this (Although maybe since I am new i dont realize its 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.

Thanks

+1  A: 

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]-->
meder  2010-07-15 20:21:46
A: 

Are you looking for something like this:?

.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;
    overflow: hidden;
}
.navbar li{
    display:inline;
    line-height:30px;
}
.navbar li a { padding:.4em 5em;}


<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>
DHuntrods  2010-07-15 20:25:32
A: 

you need to define a fixed with for your container .

for example:

.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

if you want to keep your bg color of .navbar, stick with 100%, remove float left from li and style it like this->

.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    width: 800px;
    overflow: hidden;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
    marign: 0 auto;
}
Rito  2010-07-15 20:28:39
+1  A: 

Basically comes down to add text-align: center to the ul and display: inline-block to the li's.

This seems to do the trick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html>
<head>
<style type="text/css">
.navbar {
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.navbar li{
    display: inline-block;
    padding: 2px;
    width: 150px;
}
</style>
</head>
<body>
<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>
</body>
</html>
Fabian  2010-07-15 20:32:14
Looks like i needed inline-block display for me li and text-align: center for my ul!This doesnt fix in Ie though
Josh K  2010-07-15 20:40:15
This won't work in IE6 and possibly other IE's because `li` is natively block, you need a redundant rule like in my answer ( for IE ).
meder  2010-07-15 20:42:31
Nvm it does...!
Josh K  2010-07-15 20:43:05
This works perfectly fine in IE8, IE6 indeed does support inline-block. Funny how people can criticize then basically copy your answer and finally get credit aswell ....
Fabian  2010-07-17 07:34:37
A: 

As the stackoverflow faq indicates that HTML / CSS questions should not be asked here but rather at Doctype.com, I refer you to my answer there where I detail an HTML/CSS solution for an arbitrary number of items that is compatible with the latest versions of Chrome, FireFox, Opera, Safari and with MSIE 8, 7, & 6:

Doctype - How to evenly distribute variably sized li's horizontally

danorton  2010-09-01 01:29:31

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?