1

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!

Community
  • 1
  • 1
jord8on
  • 166
  • 1
  • 3
  • 18

4 Answers4

4

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

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

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

EDIT

If, by your comment, flexbox is still an option, you could try this:

https://jsfiddle.net/fjtq28g7/7/

The only actual changes are in the wrapper:

.wrapper {
    display: flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 3%;
}
daanvanham
  • 249
  • 1
  • 8
  • #nailedit Thank you so much for this quick answer that solved my problem!!! – jord8on Nov 03 '16 at 20:42
  • One more question for you @daanvanham - how would i space those two "box" divs to have an equal amount of spacing on the left and on the right of each div? Does that make sense? Here's a pic (if it's accepted) http://take.ms/FEeuj ➞ I want the spacing to be equal from the left of the first "box" equal space in the middle and equal space to the right of the second "box" – jord8on Nov 03 '16 at 21:12
  • @jordazzle is flexbox still an option? – daanvanham Nov 03 '16 at 21:28
  • I suppose flexbox is still an option. idk how much of my code I'd have to revise to get it to work ¯\_(ツ)_/¯ – jord8on Nov 03 '16 at 21:38
  • @jordazzle Edited the answer, it's only a few lines, so you should definitely use flexbox! – daanvanham Nov 03 '16 at 21:40
  • Brilliant @daanvanham! That's perfect. With that solution I was able to remove "padding-left: 5px; padding-right: 5px;" from the CSS for "box" as well. Thank you so much!!! (is there a way to give someone extra reps/kudos on stack??) – jord8on Nov 03 '16 at 21:48
2
#wrapper {
    display: inline-block;
    text-align: center;
}

.box {
  display: table;
  width:370px;
  height: 370px;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

That should do it for you :D Just changed the display property to table, and gave it margin auto. Pretty common situation

====EDIT

Given your comment, here is what you should do:

.wrapper {
    display: inline-block;
    margin: 0px auto;
    width: 100%;
}

.box {
  display: table;
  width:370px;
  height: 370px;
  margin: 0 auto;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: top;
}

.box-container {
  width: 50%;
  float: left;
}

And then just wrap your .box div with the .box-container div. That way you have two 50% wide containers, and your box centered in the middle.

https://jsfiddle.net/9mzmu6r7/4/

leofontes
  • 898
  • 4
  • 16
  • 40
  • Thanks for the super quick response! I tried what you suggested but the second box is wrapping to the next row, instead of centering on the same level with the other div "box" https://jsfiddle.net/jord8on/9mzmu6r7/ – jord8on Nov 03 '16 at 19:57
  • Ooooh! That looks nice @leofontes! The only challenge is that I want the container on the right to wrap to the next line, when the screen width gets too small. @daanvanham provided this example which works! https://jsfiddle.net/fjtq28g7/3/ (the only thing I would like is for that example to be spaced out like yours is! – jord8on Nov 03 '16 at 20:57
2

Flexbox solution

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  width: 370px;
  height: 160px;
  margin: 5px;
  background: #aef;
}
<div class="wrapper">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

Note: Add flex vendor prefixes if required by your supported browsers.

Reggie Pinkham
  • 11,985
  • 4
  • 38
  • 36
2

flexbox is the way to go

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
}

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

display flex will put divs side by side, and with justify content, you center both of them. Remove the display inline-block from childs to work. use mz-webkit, etc for older supporting browser

Alexander Pulido
  • 114
  • 1
  • 10
  • Thanks you for this perspective. It worked nicely but unfortunately my second "box" did not wrap to the next line when the screen width gets smaller. @daanvanham provided this example which works! jsfiddle.net/fjtq28g7/3 – jord8on Nov 03 '16 at 21:01
  • just have to add flex-flow: row wrap; before justify content, a there you have :D – Alexander Pulido Nov 04 '16 at 00:18