Grow your CSS skills. Land your dream job.

Centering a nav element in a div.

  • # 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:

    < !– end of “baliza_banner_menu” div


    >

    < !– end of “home_destaque” div


    >

    < !– end of “home_third” div


    >

    < !– end of “home_third” div


    >

    < !– end of “home_third_direita” div


    >

    < !– end of “home3″ div


    >

    < !– end of “home_third” div


    >

    < !– end of “home_third” div


    >

    < !– end of “home_third_direita” div


    >

    < !– end of “home3″ div


    >

    < !– end of “Inside_container” div


    >

    < !– end of “container” div


    >

    ______________________________________

    CSS:

    body, html
    {
    margin: 0px;
    padding: 0px;
    }

    #container
    {
    width:940px;
    height:1610px;
    margin:0 auto;
    }

    #Inside_container
    {
    width:940px;
    height:1240px;
    background-color:#CCCCCC;
    }

    #banner
    {
    width:940px;
    height:120px;
    background-image:url(images/ST_banner.jpg);
    }

    #baliza_banner_menu
    {
    width:940px;
    height:10px;
    }

    #menu
    {
    width:920px;
    height:30px;
    background-color:#666666;
    margin:0 10px 10px 10px;
    }

    nav ul li:hover > ul
    {
    display: block;
    }

    nav ul
    {
    background:#202121;
    background: linear-gradient(top, #393B3A 0%, #202121 100%);
    background: -moz-linear-gradient(top, #393B3A 0%, #202121 100%);
    background: -webkit-linear-gradient(top, #393B3A 0%,#202121 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    list-style: none;
    position: relative;
    display: inline-table;
    float:left;
    }

    nav ul li
    {
    float: left;
    }

    nav ul li:hover
    {
    background:#F0F0F0;
    background: linear-gradient(top, #F0F0F0 0%, #FFF 40%);
    background: -moz-linear-gradient(top, #F0F0F0 0%, #FFF 40%);
    background: -webkit-linear-gradient(top, #F0F0F0 0%,#FFF 40%);
    }

    nav ul li:hover a
    {
    color:#333333;
    }

    nav ul li a
    {
    display: block;
    padding: 8px 30px;
    color: #FFF;
    text-decoration: none;
    }

    nav ul ul
    {
    display: none;
    background: #F0F0F0;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    }

    nav ul ul li
    {
    float: none;
    border-top: 1px solid #CCC;
    position: relative;
    }

    nav ul ul li a
    {
    padding: 5px 30px;
    color: #fff;
    }

    nav ul ul li a:hover
    {
    background:#F5F5F5;
    }

    #home_destaque
    {
    width:920px;
    height:400px;
    background-color:#FFFFFF;
    margin:0 10px 10px 10px;
    }

    #home3
    {
    width:920px;
    height:300px;
    margin:0 10px 10px 10px;
    }

    #home_third
    {
    width:300px;
    height:300px;
    background-color:#FFFFFF;
    float:left;
    margin-right:10px;
    }

    #home_third_direita
    {
    width:300px;
    height:300px;
    background-color:#FFFFFF;
    float:left;
    }

    #home_footer
    {
    width:920px;
    height:150px;
    background-color:#FFFFFF;
    margin:0 10px 10px 10px;
    }

    a
    {
    font: 12px Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    # December 28, 2012 at 12:34 pm

    Can you post the code on Codepen?

    # 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.

    # 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

    # 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;`.

    # 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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".