#1
  1. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2005
    Posts
    724
    Rep Power
    295

    Centering a div inside a div


    I'm trying to center the <div class="menu"> inside the <div id="nav"> but I cannot figure out what to do exactly. I've tried so many different things with the text-align:center to putting it into a table and centering that... Nothing I try is making it go to the center.

    Will someone please assist me in getting this centered?

    EDIT: The way I have it currently, If I put text outside of the <div class="menu"> then that will be centered fine like I want the div.

    HMTL code
    Code:
    <div id="nav">
    <div class="menu">
        <ul>
        <li><a class="hide" href="#">Top 1</a>
            <ul>
                <li>Sub Top 1.1</li>
                <li>Sub Top 1.2</li>
            </ul>
        </li>
        <li><a class="hide" href="#">Top 2</a>
            <ul>
                <li>Sub Top 2.1</li>
                <li>Sub Top 2.2</li>
            </ul>
        </li>
        </ul>
    </div>
    </div>
    CSS code
    Code:
    #nav{background-color:Blue;height:35px;width:auto;text-align:center;}
    
    /* common styling */
    .menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
    .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
    .menu ul {padding:0; margin:0; list-style: none;}
    .menu ul li {float:left; position:relative;}
    .menu ul li ul {display: none;}
    
    /* specific to non IE browsers */
    .menu ul li:hover a {color:#fff; background:#36f;}
    .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
    .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
    .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
    .menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
    .menu ul li:hover ul li:hover ul.left {left:-105px;}
    Last edited by Vomster; December 13th, 2010 at 01:59 PM.
  2. #2
  3. No Profile Picture
    gettin **** cold ouside bro
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Location
    Sofia, Bulgaria
    Posts
    133
    Rep Power
    153
    have you tried

    Code:
    .menu {margin:auto;}

    Comments on this post

    • Vomster agrees : Thanks a ton!!
  4. #3
  5. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2005
    Posts
    724
    Rep Power
    295
    No, but I will try later today and let you know.
  6. #4
  7. No Profile Picture
    gettin **** cold ouside bro
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Location
    Sofia, Bulgaria
    Posts
    133
    Rep Power
    153
    alright 2 things you might wanna keep in mind:
    1. margin will center the div according to width and not the contents inside the div. put different background colours on both divs so you can see whats going on.

    2. second thing you need to keep in mind: the width is 750 pixels and if the div surrounding it is 750px or less nothing will happen. But if thats the case i suggest you think your whole structure all over again.

IMN logo majestic logo threadwatch logo seochat tools logo