CODEWITHSUNDEEP
htmlcss
carinlynchin
carinlynchin

Reputation: 389

Can't center a ul inside a div

I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...

Here is the section of CSS code:

#nav {
    display:block;
    background-color:#505050;
    height:17.5px;
    box-shadow: 0px 0px 15px 5px #CCCCCC inset;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:1.5%;
}
#nav li {
    padding:0px 20px 0px 20px;
    display:inline;
    /*float:left;*/
    list-style:none;
    position:relative;
}
#nav li a {
    padding:0px 0px 20px 0px;
    color:#FFFFFF;
    text-decoration:none;
}

and here is my ul code:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Current Litters</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="./bandi.html">Bandi</a></li>
            <li><a href="./studs.html">Studs Used</a></li>
            <li>Test Dog2</li>
            <li>Test Dog3</li>
        </ul>
    </li>
    <li><a href="#form">Contact Us</a></li>
 </ul>

Here is the rest of my code actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...

...and the text align did great....but only after removing the float... 

#nav li a:hover {
    text-decoration:underline;
}
#nav li ul{
    padding:10px;
    font-size:medium;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
    display:block;
    border-radius:20px;
    border:1px solid;
    width:150px;
}

Upvotes: 3

Views: 11576

Answers (7)

Credo Code
Credo Code

Reputation: 1

It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.

Upvotes: 0

Wex
Wex

Reputation: 15695

There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:

Generally, inline elements may contain only data and other inline elements.

That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:

<!-- Version A: This will produce a gap between the two elements -->
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

<!-- Version B: This will not produce a gap between the two elements -->
<li>
    <a href="#">Home</a>
</li><li>
    <a href="#">About Us</a>
</li>

If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</nav>

CSS:

nav { overflow: hidden; }
nav ul {
    position: relative;
    float: left;
    left: 50%;
    list-style: none;
    padding: 0; }
nav ul li {
    position: relative;
    float: left;
    right: 50%;
    margin: 0 5px; }
nav ul li a { display: block; }

Preview: http://jsfiddle.net/Wexcode/rsDbY/

You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.

Upvotes: 2

fivedigit
fivedigit

Reputation: 18672

To center a block element, you also need to explicitly set the width to some value, like this:

#nav {
    width: 50%;
    margin: 0 auto;
}

Upvotes: 3

Gustavo Straube
Gustavo Straube

Reputation: 3861

Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.

Upvotes: 0

Mario Visic
Mario Visic

Reputation: 2663

Adding text-align: center to the nav unordered list seems to work for me in chrome

#nav {
  text-align: center;
}

Upvotes: 3

Jared
Jared

Reputation: 12524

You need to set a fixed width on your ul for margin-right:auto and margin-left:auto

Upvotes: 0

No Results Found
No Results Found

Reputation: 102735

This is actually quite simple, since your list items are display:inline. Add this style:

#nav {
    text-align:center;
}

Demo: http://jsfiddle.net/fH6f5/

There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).

Upvotes: 6

Related Questions