Question

I have a set of divs that I have set to float:left and I am wanting them to all be in line with each other but still be centered, this is what I currently have:

HTML

<div style="display: inline; text-align:center;">
    <div id="generalmenu">
        test
    </div>
    <div id="generalmenu">
        test
    </div>
    <div id="generalmenu">
        test
    </div>
</div>

CSS

#phonicmenu { 
    background: white; 
}
#generalmenu { 
    background: white; 
    width:270; 
    padding: 25px; 
    float:left; 
    margin-left: auto; 
    margin-right: auto; 
}

Any idea on how I can center these menus?

EDIT:
Added a JS Fiddle with a body so you can see the problem clearer.
http://jsfiddle.net/aYWwM/

Answer 1

The problem is also that you are using divs for purposes they aren’t made for. A div is a block element. You want to display stuff as inline elements, so you should use span or an unordered list.

To do what you need, simply create a wrapping div and have its margin-left and margin-right set to auto. The wrapper should contain inline elements of what you need… See this jsFiddle