0

I'm using a flexbox and it is putting items next to each other and not centering vertically. I got the code to center from http://howtocenterincss.com. Below is my code and what I see. A solution would be appreciated.

<div style="display:flex;justify-content:center;align-items:center;">
    <h1>heading</h1>

    <p>content</p>
  </div>

heading

content

Screenshot of what I see

username
  • 79
  • 10

2 Answers2

2

you need to add flex-direction property 

element {
    display: flex;
    flex-direction: column;
}
Rahul
  • 33
  • 6
0

You have to add flex-direction in your container. One more important concept, you can't align your items vertically center unless you set some height to your container so also add some height in your container div as per your requirement. Also, make sure to use all browser prefixes for cross-browser compatibilities. You can add this code as an internal style or as an external stylesheet.


<style>

div{
min-height:100vh;
  display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
-webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}
</style>

These codes will center all the child elements, horizontally and vertically.

Pranay kumar
  • 1,983
  • 4
  • 22
  • 51