CSS flex centered columns with element wrap

Question

My goal here is to have these 3 elements on the same line with vertical centering. I don't want to use a inner div to achieve this layout.

div {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
}
div * {
  background-color: aqua;
}

<div>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <p>paragraph</p>
</div>

I have experimented adding a flex-wrap, align-items: start; and flex-shrink. I also tried setting the width of the elements individually. None of these have put the elements on the same line.

score 1 · Accepted Answer · answered Nov 26 '20 at 15:43

flex-direction: column won't work to keep them in the same line. Use row (default)...

div {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
div * {
  background-color: aqua;
}

<div>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <p>paragraph</p>
</div>

responsive demo

score 1 · Answer 2 · answered Nov 26 '20 at 15:43

1

Is that what you want or have I understood you wrong?

div {
  display: flex;
  height: 100vh;
  align-items: center;
}
div * {
  background-color: aqua;
}

<div>
  <h1>header 1</h1>
  <h2>header 2</h2>
  <p>paragraph</p>
</div>

answered Nov 26 '20 at 15:43

Razvan Zamfir

4,237
4
24
201

CSS flex centered columns with element wrap

2 Answers2