Why wont these boxes align vertically?

Question

I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.

The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.

#wrapper {
  width: 1000px;
  height: 1000px;
}

#container {
  width: 900px;
  height: 900px;
  text-align: center;
  display: inline-block;
  background-color: lightblue;
}

.box {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
  background-color: lightgreen;
  border: 1px solid grey;
  margin: 10px;
}

<div id="wrapper">
  <div id="container">
    <div class="box">BOXES</div>
    <div class="box">BOXES</div>
    <div class="box">BOXES</div>
  </div>
</div>

If you want them to stack vertically, why are you using `display:inline-block`? — Jon P, Nov 11 '20 at 03:05
Then what do you mean by: "place them vertically in the middle"? — Jon P, Nov 11 '20 at 03:08
MDN docs for [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) say: _To vertically align an inline element's box inside its containing line box_. Your `.box`es are not `inline` — maazadeeb, Nov 11 '20 at 03:28
Could you clarify what you intend the end result to look like? The boxes are centered inside the wrapper. What does `vertical-align` have to do with your question? — Liam Pillay, Nov 11 '20 at 04:03
read this to undestand: https://stackoverflow.com/a/54190413/8620333 — Temani Afif, Nov 11 '20 at 10:27
@TemaniAfif it did it, thank you very much, it was driving me nuts. — BiP00, Nov 11 '20 at 11:32

UnReal G · Answer 1 · 2020-11-11T03:09:19.383

0

I think you are looking for flexbox.

I have adapted your jsfiddle to fit https://jsfiddle.net/ke4w58ra/

The folowing code is what I have changed to your #content element.

display: flex;
justify-content: center;
align-items: center;
gap: 5px;

Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.

For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Below is the integrated form of the JSFiddle

#container{
    width: 100vw;
    height: 100vh;
    
    text-align: center;
    display: inline-block;
    background-color: lightblue;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.box{
    width: 200px;
    height: 200px;
    
    margin: 0 auto;
    
    background-color: lightgreen;
    border: 1px solid grey;
    margin: 10px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
  margin: 0px;
}

<body>
    <div id="container">
        <div class="box">BOXES</div>
        <div class="box">BOXES</div>
        <div class="box">BOXES</div>
    </div>
</body>

edited Nov 11 '20 at 03:09

answered Nov 11 '20 at 03:03

UnReal G

106
2
8

it works, but the question is to see if something is missing with my code to just use vertical align, as it should work. – BiP00 Nov 11 '20 at 03:22
1

Personally, I would'nt use vertical align as it has a tendancy to break under many circumstances and is non-flexble to other display sizes (fixed vs dynamic content viewing) – UnReal G Nov 11 '20 at 03:29
2

@BiP00 , the behaviour of [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) is a little different to what you expect. *Note* Middle : "Aligns the middle of the element with the _baseline_ plus half the x-height of the parent." NOT the middle of the parent. – Jon P Nov 11 '20 at 03:52
@JonP thnak you very much, got it now. – BiP00 Nov 11 '20 at 11:33

Why wont these boxes align vertically?

1 Answers1