Page 1 of 1

<br> not working in floxbox

Posted: Tue Nov 29, 2022 10:52 am
by 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.

Re: <br> not working in floxbox

Posted: Tue Nov 29, 2022 10:55 am
by siteadmin
Hi Cathe,

You may try it like this,

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

Re: <br> not working in floxbox

Posted: Tue Nov 29, 2022 11:01 am
by 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;
}

Re: <br> not working in floxbox

Posted: Tue Nov 29, 2022 11:07 am
by Catherine
Thanks, work great. :D