Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    center javascript menu w/css

    Hello,
    It's been quite a long time since I did any web development and I have forgotten things, plus things have changed a bit. Apologies up front if I miss the obvious.

    I have a javascript menu (3rd party) that I am trying to center in a div.

    I am using the following:

    HTML:

    <div class="navbar">
    <script type="text/javascript" src="navbars/navTop/myscript.js"></script>
    </ div>

    CSS:

    .navbar {
    display: block;
    width: 100%;
    margin: 0 auto;
    }

    (I also tried using "text-align:center;" - but that didn't work, either.)

    What am I missing??

    Thanks,
    Jake

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jake7363,
    A 100% width leaves nothing to be centered since it takes up all the room available to it.
    To center whatever is contained inside .navbar instead, text-align: center; can work on a ul as long as the li's are inline-block. See this example.

    If that doesn't work...
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    There is also the positioned centering method outlined here.

    If none of that helps, we'd probably need a look at the rendered code to see what else might be needed.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •