Question

I have the following layout in a sidebar:

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
        <div>button three</div>
    </div>
</div>

I am able to center these three buttons by setting the center width = 100% and the buttons divs to be 33%.

.sidebar {
    width: 300px
}
.center {
    width: 100%;
    background: red;
    margin: 0 auto; 
}
.center div {
    width: 33%;
}

However, I’d like to layout to remain centered when I only have two buttons:

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
    </div>
</div>

So that the two buttons would be in the center (i.e., indent both buttons 16.66% from the right and left edges, in absence of the third button).

How would I accomplish this with a purely css solution?

Answer 1

This is what you need:
http://jsfiddle.net/HFaTW/

HTML:

<div class="sidebar">
    <div class="center">
        <div>button one</div>
        <div>button two</div>
        <div>button three</div>
    </div>
</div>

CSS:

.sidebar{
    width:400px;
}

.center{
    background-color:#f9f9f9;
    text-align:center;
}

.center div{
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
    color:#FFF;
    background-color:darkgray;
}