<br> not working in floxbox

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.

HTML:

<div class="centerEverything">
    <form id="loginForm" method="POST" action="../login.js">
        <label for="email">
            <input type="email" name="email" id="loginEmail" size="30" required> *<br>
        </label>
        <label for="password">
            <input type="password" name="password" id="password" size="30" required> *<br>
        </label>
        <input type="submit" value="Log in"><br>
    </form>
    <br>
    <a href="../forgotPassword.html">Forgot password?</a>
</div>

Code (markup):

CSS:

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

Code (markup):

How do I fix this and thanks in advance.

Noted: I'm going to do something similar to this: https://medium.com/@girishsolanki20/15-ui-ux-design-trends-in-2022-2023-d28260c29fc6

 

Try it like this...

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

Code (markup):

coothead

 

@coothead,

It works.

Thank you.

 

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;
}

Code (markup):

 

@qwikad.com,

Thanks for the tip. Work great!

 

why did you use *<br> instead of just <br>

 

To display an asterisk immediately after the required input elements.
​

coothead

 

Since you're not setting a height I'm not even sure just what it is you think you need flex for. The markup though is horrifying with the outer DIV doing the FORM's job, lack of FIELDSET, lack of actual text for your LABEL, FOR/ID for nothing since you're using wrapping LABEL, submit input like you still care about supporting Nyetscape 4...

Your markup likely should have gone more like this:

<form id="loginForm" method="post" action="/login.js">
	<h2>Log In</h2>
	<fieldset>
		<label>
			E-Mail Address<br>
			<input type="email" name="email" size="30" required><br>
		</label>
		<label>
			Password<br>
			<input type="password" name="password" size="30" required><br>
		</label>
	</fieldset>
	<footer>
		<button>Log In</button><br>
		<a href="../forgotPassword.html">Forgot password?</a>
	</footer>
</form>

Code (markup):

Oh and for those "required" asterisks, since you've got perfectly good HTML 5 validation there, just ditch them. If you REALLY want to add some sort of visual queue to it, input[required] in the CSS can do all sorts of wonderful things.

Again though I have no idea what the devil you're making it flex for without any sort of height management, unless it itself is inside a flex container as well... and even then it doesn't make a lot of sense.

 

Thanks @deathshadow

I'm only coding HTML and CSS once in a while. I'm just googling everything I want. I'll study your tips.
The purpose of the flex is making everything in the middle center. The form will be used mostly on mobile phones or some other things like tablet.

 

Horizontally (where you don't need or even want flex) or vertically (where without a height or min-height your flex does nothing)?

I'm not seeing anything flex provides that margin:auto would not.

 

I'm sorry I don't quite follow you. I'm not very good at HTML and CSS.

Flexbox helps me get the job done nicely.

I remember, in the old day (the last time I built a large web site project is 2017), when I want to center anything vertically and horizontally I have to have a wrapper div displayed as table and the inner one displayed as table cell. I hate it a lot and I stayed at the backend ever since.

Fast forwards to these days, they have a flexbox and a clamp() function which I never heard of before and they help getting things done neatly. No more media queries needed and it's easier to get the intended designs. Those are the designs I can only dream of in the old days because I'm unable to do it myself.

Now everything is easier. Though I was forced to do this, I started to love designing web sites again