Center Three Divs Side By Side

I have three divs that I want to center side by side on a page. I also have some content such as

and

tags in them HTML (example)

Solution 1:

Try it without float and with text-align:center; on the #wrapper. Since your blocks are display:inline-block;, they'll center the same way text does.

Note that nto make it responsive, I swapped all your widths to % instead of px and removed some extra margin spacing. I've also added vertical-align:top; so the divs aline along the top.

#wrapper{
    text-align:center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
.aboutleft,
.aboutright{
    display: inline-block;
    vertical-align:top;
    width: 48%;
}
.vline{
    background: rgb(186,177,152);
    display: inline-block;
    vertical-align:top;
    min-height: 250px;
    margin: 0;
    width: 1px;
}

http://jsfiddle.net/daCrosby/Ce3Uz/2/

Solution 2:

Yes

margin:0auto

without the comma

but also your divs should probably all have

float: left

as well. Then they will flow from the left across the page.

Wing

Solution 3:

You can just remove your floats. Using text-align:center on the wrapper will align your display:inline-block elements side by side just like that.

I made a fiddle with your content doing just that. I also added a 'centerstuff' div where you should put the center content in, and made the widths smaller so it's more visible.

http://jsfiddle.net/rNcHY/

it's just margin: 0 auto, as others have noted.

Solution 4:

Don't use , in the margin. Using this in your css for .wrapper will solve the issue.

margin: 0 auto;

Also, if you are using absolute widths for the children of wrapper, you might as well use a fixed value for wrapper as well, as that will center the div wrt the children.

Share