Aligning a button to the center

20

I have a simple submit button. I am wanting to align it to the center. Here is my code:

<input type="submit" name="btnSubmit" value="Submit" onClick="Submit" align="center">

However, it does not work. What is the best/easiest way to do this?

This question is tagged with html css

~ Asked on 2012-04-02 06:27:52

The Best Answer is


39

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>  

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

~ Answered on 2012-04-02 06:31:52


2

For me it worked using flexbox, which is in my opinion the cleanest solution.

Add a css class around the parent div / element with :

.parent {
display: flex;
}

and for the button use:

.button {
justify-content: center;
}

You should use a parent div, otherwise the button doesn't 'know' what the middle of the page / element is.

If this is not working, try :

#wrapper {
    display:flex;
    justify-content: center;
}

~ Answered on 2017-11-01 11:51:45


Most Viewed Questions: