Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aligning a button to the center

Tags:

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?

like image 294
Garry Avatar asked Apr 02 '12 06:04

Garry


People also ask

How do I align a button to the center in HTML?

You can center a block level element by setting margin-left and margin-right to auto . We can use the shorthand margin: 0 auto to do this. (This also sets margin-top and margin-bottom to zero.)

How do you center align a button in w3schools?

To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.

How do I align an item to the center of the screen?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.


2 Answers

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;" /> 
like image 61
lvil Avatar answered Oct 26 '22 06:10

lvil


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.

like image 27
Anna Medyukh Avatar answered Oct 26 '22 05:10

Anna Medyukh