View Full Version : center javascript menu w/css

01-15-2013, 04:07 AM
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:


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


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


01-15-2013, 05:26 AM
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 (http://nopeople.com/CSS%20tips/menu_centered_dropdown/index.html).

If that doesn't work...
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

There is also the positioned centering method outlined here (http://codegrad.hub.ph/centering-a-fixed-width-webpage-using-absolute-position/).

If none of that helps, we'd probably need a look at the rendered code to see what else might be needed.