Best IT Recipes

Central HTML / CSS Button Submission Form

I'm having problems centering the submit buttons of my HTML form in CSS.

Right now I'm using:

<input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">

with this CSS content

 #btn_s{ width: 100px; margin-left: auto; margin-right: auto; } #btn_i { width: 125px; margin-left: auto; margin-right: auto; }

And he does nothing. I know that I’m probably doing something stupid wrong. How can i fix this?

+64
html css alignment center
Nov 19 '10 at 1:09
source share
8 answers

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

I just wrapped the div around them and made it center-aligned. then you don’t need any css on the buttons to center them.

 <div class="buttonHolder"> <input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> </div> .buttonHolder{ text-align: center; }
+119
Nov 19 '10 at 1:14
source share

Input elements are embedded by default. Add display:block to apply the fields. This, however, will break the buttons into two separate lines. Use wrapping <div> with text-align: center , as suggested by others, to get them on the same line.

+29
Nov 19 '10 at 1:31
source share

I see several answers here, most of which are complex or with some minuses (additional divs, text-align do not work due to display: inline-block). I think this is the simplest and most reliable solution:

HTML:

 <table> <!-- Rows --> <tr> <td>E-MAIL</td> <td><input name="email" type="email" /></td> </tr> <tr> <td></td> <td><input type="submit" value="Register!" /></td> </tr> </table>

CSS

 table input[type="submit"] { display: block; margin: 0 auto; }
+12
Apr 19 '17 at 16:43 on
source share

Try the following:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <style type="text/css"> #btn_s{ width:100px; } #btn_i { width:125px; } #formbox { width:400px; margin:auto 0; text-align: center; } </style> </head> <body> <form method="post" action=""> <div id="formbox"> <input value="Search" title="Search" type="submit" id="btn_s"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i"> </div> </form> </body>

This has 2 examples, you can use the one that works best in your situation.

  • use text-align:center in the parent container or create a container for this.
  • If the container should have a fixed size, use auto left and right margins to center it in the parent container.

note that auto used with individual blocks to center them in the parent space, distributing the empty space left and right.

+6
Nov 19 '10 at 1:19
source share

I assume that the buttons should be located next to each other on the same line, they should not be centered using the 'auto' field, but placed inside a div with a certain width with the '0 auto' field:

CSS:

 #centerbuttons{ width:250px; margin:0 auto; }

HTML (after removing the field properties from the CSS of your buttons):

 <div id="centerbuttons"> <input value="Search" title="Search" type="submit"> <input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit"> </div>
+1
Nov 19 '10 at 1:33
source share
 <style> form div { width: 400px; border: 1px solid black; } form input[type='submit'] { display: inline-block; width: 70px; } div.submitWrapper { text-align: center; } </style> <form> <div class='submitWrapper'> <input type='submit' name='submit' value='Submit'> </div>

Also check jsfiddle

+1
Feb 17 '14 at 23:16
source share

One simple solution, if you only need to center one button, is something like:

 <input type='submit' style='display:flex; justify-content:center;' value='Submit'>

You can use a similar style to handle multiple buttons .

0
Mar 14 '19 at 15:29
source share
 /* here is what works for me - set up as a class */ .button { text-align: center; display: block; margin: 0 auto; } /* you can set padding and width to whatever works best */
0
Jun 25 '19 at 16:15
source share


More articles:


All Articles