-1

I tried this to vertically center all items in a Jumbotron,

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

But the issue is all items are lined up in a single line like they are displaying inline. How do you vertically center them while still displaying them in block.

Asons
  • 84,923
  • 12
  • 110
  • 165
CodeMan
  • 314
  • 2
  • 3
  • 5
  • Could you provide your code to the jumbotron. I don't really understand why your content wouldn't be **vertically** centered when jumbotron has the same amount of padding applied both to the top and the bottom. – Klooven Nov 18 '17 at 07:11
  • @Klooven please read my question again and you will understand. – CodeMan Nov 18 '17 at 13:48

2 Answers2

0

Since block element stacks vertically, change the flex direction to column, and so will the flex items.

display: flex;
flex-direction: column;              /*  added  */
justify-content: center;
align-items: center;
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Adding to above answer, you can also center text elements such as h1, p or a by setting text-align to center.

display: flex;
flex-direction: column;              
justify-content: center;
align-items: center;                    /*  aligning items  */
text-align: center;                     /*  aligning text  */
Abdel
  • 69
  • 3