<br> not working in floxbox

[Catherine]

Hi Guys,

I've created a simple login page and I want everything appears in the center vertically and horizontally. This would use mostly on a mobile phone. So I use flexbox as a solution.

The problem: the <br> tag doesn't seem to work in flexbox.


CSS
.centerEverything {
display: flex;
justify-content: center;
align-items: center;
}
How do I fix this and thanks in advance.

[siteadmin]

Hi Cathe,

You may try it like this,

.centerEverything {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

[Bella]

hi,
Also if you want to add spaces between the fields and the button you can add a line-height:

.centerEverything {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 2em;
}

[Catherine]

Thanks, work great.