Tomia

# December 28, 2012 at 12:27 pm

Hi, i’m a novice at this :) .i’m having difficulty trying to center a nav inside a div i’ve named ‘menu’. I’ve tried to find the problem in the details and nothing is helping. Seeing that the problem might also reside elsewhere within the page i’m creating, i will post all of the html (hope i’m not pushing it), plus the CSS. i appreciate the help. Thank you.

html:

wolfcry911

# December 28, 2012 at 12:34 pm

Can you post the code on Codepen?

David_Leitch

# December 28, 2012 at 10:32 pm

Just having a look at that, I think your problem might be related to using float: left on nav ul. nav ul is the container of all of the nav links, so floating that to left with take the whole menu to the left.

I would try display: block; margin: 0 auto; on the nav ul element. From what I can see, that would centre the nav.

Eric

# December 28, 2012 at 11:38 pm

Here is how. Read through it. If you hit a wall post back http://www.visibilityinherit.com/code/center-nav.php

AaronCDR

# December 30, 2012 at 8:39 am

This wouldn’t be what you’re trying to achieve by chance?

http://codepen.io/AaronCDR/pen/KbJyG

If you haven’t defined a width on the menu, setting it to `display: table;` with `margin: 0 auto;` should centre it within the parent element.

Edit – just noticed you have defined a width, in which case @David_Leitch is correct with `display: block;`.

Tomia

# January 2, 2013 at 9:22 am

Thank you all for the precious feedback. David, the display:block property causes the submenu to appear over the menu, ie. it overlaps the nav, but removing the float did center the nav as i intended it to. Thank you.

wolfcry911

# December 28, 2012 at 12:34 pm

Can you post the code on Codepen?

David_Leitch

# December 28, 2012 at 10:32 pm

Just having a look at that, I think your problem might be related to using float: left on nav ul. nav ul is the container of all of the nav links, so floating that to left with take the whole menu to the left.

I would try display: block; margin: 0 auto; on the nav ul element. From what I can see, that would centre the nav.

Eric

# December 28, 2012 at 11:38 pm

Here is how. Read through it. If you hit a wall post back http://www.visibilityinherit.com/code/center-nav.php

AaronCDR

# December 30, 2012 at 8:39 am

This wouldn’t be what you’re trying to achieve by chance?

http://codepen.io/AaronCDR/pen/KbJyG

If you haven’t defined a width on the menu, setting it to `display: table;` with `margin: 0 auto;` should centre it within the parent element.

Edit – just noticed you have defined a width, in which case @David_Leitch is correct with `display: block;`.

Tomia

# January 2, 2013 at 9:22 am

Thank you all for the precious feedback. David, the display:block property causes the submenu to appear over the menu, ie. it overlaps the nav, but removing the float did center the nav as i intended it to. Thank you.