jordazzle jordazzle - 1 month ago 9
HTML Question

Horizontally Center two divs within a container div

I found this similar question but could not get it to work.

I have two div containers labelled in my CSS as "box" and I can't get them to be centered within their parent div (labelled as "wrapper" in my CSS)

Here's my code: https://jsfiddle.net/jord8on/fjtq28g7/

CSS:

.wrapper {
display: inline-block;
margin: 0 auto;
}

.box {
display: inline-block;
width:370px;
height: 370px;
padding-left: 5px;
padding-right: 5px;
vertical-align: top;
}


Any help would be greatly appreciated!

Answer

You should change some styling for the wrapper and you'll be good:

.wrapper {
    display: block;
    text-align: center;
}

https://jsfiddle.net/fjtq28g7/3/