CODEWITHSUNDEEP
htmlcss
Garry
Garry

Reputation: 1281

Aligning a button to the center

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?

Upvotes: 26

Views: 234637

Answers (5)

Royal
Royal

Reputation: 407

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

Upvotes: 2

japetko
japetko

Reputation: 358

Add width:100px, margin:50%. Now the left side of the button is set to the center.
Finally add half of the width of the button in our case 50px.
The middle of the button is in the center.

<input type='submit' style='width:100px;margin:0 50%;position:relative;left:-50px;'>

Upvotes: 0

Holly Williford
Holly Williford

Reputation: 80

margin: 50%;

You can adjust the percentage as needed. It seems to work for me in responsive emails.

Upvotes: 0

Anna Medyukh
Anna Medyukh

Reputation: 310

Here is what worked for me:

    <input type="submit" style="margin-left: 50%">

If you only add margin, without the left part, it will center the submit button into the middle of your entire page, making it difficult to find and rendering your form incomplete for people who don't have the patience to find a submit button lol. margin-left centers it within the same line, so it's not further down your page than you intended. You can also use pixels instead of percentage if you just want to indent the submit button a bit and not all the way halfway across the page.

Upvotes: 2

lvil
lvil

Reputation: 4336

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;" />

Upvotes: 44

Related Questions