Input type submit button not centered

Hi guys,

I've another problem. I tried to center the log in button but I couldn't get anything done. What have I done wrong?

HTML:

<div class="centerEverything">
    <form id="loginForm" method="POST" action="../login.js">
        <label for="email">
            <input type="email" name="email" id="loginEmail" placeholder="Email" required><br>
        </label>
        <label for="password">
            <input type="password" name="password" id="loginPassword" placeholder="Password" required><br>
        </label>
        <div class="buttonHolder">
            <input type="submit" value="Sign in">
        </div>
    </form>
    <a href="../forgotpassword.html">Forgot password?</a><br>
</div>

Code (markup):

CSS:

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

input[type=submit] {
    padding: 0.5em 1em;
    cursor: pointer;
    border: none;
    border-radius: 0.2em;
}

Code (markup):

It seems the button has an indent ever since the first place.
I tried to upload the screenshot but it doesn't work.

Thank you,

 

Alright,

I fixed it. I have an element floated left before it. So this caused the trouble.

 

or you can just add text-align: center in your main div:

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

input[type=submit] {
    padding: 0.5em 1em;
    cursor: pointer;
    border: none;
    border-radius: 0.2em;
}

Code (markup):

 

I'd say your biggest problem is DIV for nothing, missing tags, using INPUT for BUTTON like we still care about Nyetscape 4, for/id when you are using the wrapping behavior AND have a complete lack of actual label text, abusing placeholder to do label's job, etc. etm.

ANYONE telling you to use placeholder that way needs a boot up their backside. That's NOT its job!

<form id="loginForm" method="POST" action="../login.js">
	<h2>Log In</h2>
	<fieldset>
		<label>
			E-Mail<br>
			<input type="email" name="email" required><br>
		</label><label>
			Password<br>
			<input type="password" name="password" required><br>
		</label>
	</fieldset>
	<footer>
		<a href="../forgotpassword.html">Forgot password?</a><br>
		<button>Submit</button>
		<!-- hidden inputs go here -->
	</footer>
</form>

Code (markup):

Is roughly what your markup should be there. Fun part is you can max-width the form and then 100% width the input (assuming you set box-sizing:border-box and they'll fit the parent.

Only thing I'd be putting centering on is "#loginForm footer" and even then probably flex it instead so as to let the anchor ride up next to the button.

Check this pen:
https://codepen.io/jason-knight/pen/wvXQvMJ

 

Thanks for suggestion and the good example, but may I ask?

Why do you put the footer inside the form? Is it legitimate, accessibility or anything?

 

Because the submit, reset, hiddens, extra links relating to the form, and so forth are not user editable fields -- so they don't belong in a fieldset -- and using footer means I don't have to put a classed DIV in there? They are content for the form's footer. Just as a H2 + p describing the whole form would/should be the form's header.

Wait... you said "the" footer? Are you under the impression that a page can only have one footer?

I might be reading too much into how you worded that, but ANY section level element -- body, form, article, section, main -- can have their own footer and header tag inside them. Footer/header are not singular or unique.

Some people at the WhatWG want to make that the case for MAIN, something I'm vehemently against because being singular as it is, MAIN is great for accessibility. Allowing more than one main makes it harder on screen readers to find where the main content of the document starts. At that point we might as well fall back to HTML 4 style reliance on numbered headings and say to hell with all those new 5 tags.

But footer/header are sectional, so they're fine that way.