Center form submit buttons HTML / CSS

Question

I'm having troubles centering my HTML form submit buttons 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 it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?

score 133 · Accepted Answer · answered Nov 19 '10 at 01:14

133

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

i just wrapped a div around them and made it align center. 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; }

answered Nov 19 '10 at 01:14

Sebastian Patane Masuelli

4,217
1
18
23

7

actually, the downside of this solution is that holder div centers *everything* in it, including text and children and children of children... so it's usually better to use 'margin: 0 auto' on single elements, when we don't want the entire container centered - and, as pointed out, you can achieve that with block elements. Still, occasionally I use centering like this, so it's -0 from me, since you're not wrong... – Apr 26 '14 at 21:07
Works perfectly for me when I used it for a CSS styled button link. Wrap the with the div and class and it should work perfectly without affecting different classes. – masmrdrr Jun 18 '15 at 09:31

score 37 · Answer 2 · answered Nov 19 '10 at 01:31

37

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

answered Nov 19 '10 at 01:31

Tom

30,090
27
90
124

2

The thing I really like about this answer is that it explains why the problem was happening in the first place. – Chris Walker Mar 21 '21 at 03:37

score 20 · Answer 3 · answered Apr 19 '17 at 16:43

I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free 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;
}

Absolutely agree with you, this is best solution, thanks! +1 — stepik21, Aug 12 '17 at 14:25

DarkWingDuck · Answer 4 · 2010-11-19T01:24:57.343

Try this :

<!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 fits best in your situation.

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

note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.

score 4 · Answer 5 · answered Jun 25 '19 at 16:15

4

/* 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 */

answered Jun 25 '19 at 16:15

Dave Taitelbaum

71
4

Gah... `display: block`... always forget that! – charles-allen Feb 04 '20 at 01:38

score 1 · Answer 6 · answered Feb 17 '14 at 23:16

1

<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 this jsfiddle

answered Feb 17 '14 at 23:16

kta

19,412
7
65
47

You need to set the margin on the button as well. margin: 0 auto; – Gawie Schneider Jun 22 '18 at 18:59

score 1 · Answer 7 · edited Jan 31 '18 at 13:42

I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':

CSS:

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

HTML (after removing the margin properties from your buttons' CSS):

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

Nagev · Answer 8 · 2022-07-16T12:42:11.487

1

One simple solution if only one button needs to be centered is something like:

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

Although I've used an inline example, for production, the code should be placed in a CSS file using a class.

edited Jul 16 '22 at 12:42

answered Mar 14 '19 at 15:29

Nagev

10,835
4
58
69

Ummm, bad practice to use inline JavaScript. – IamBatman Nov 28 '20 at 04:41
Thanks for the feedback, I used this for an internal tool, not in production, and I just wanted a quick solution. Mostly programming in C and Python at the time. Please go ahead and delete the answer, I click on “delete” but nothing happens... – Nagev Nov 28 '20 at 16:15
I think I remember why I chose this, the temporary internal tool I wrote used python CGI to write dynamic HTML, so the requirement was essentially as short as possible in one line. – Nagev Nov 28 '20 at 18:14

score 1 · Answer 9 · answered Oct 08 '21 at 05:31

If you want to take it to the next level, use flexbox:

.form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 1em;
}
#btn_s {
  width: 100px;
}
#btn_i {
  width: 125px;
}

<div class="form">
  <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>

Guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 0 · Answer 10 · edited Oct 08 '21 at 08:30

0

You can do it with text-align: center.

.form-1 {
  text-align: center;
}
#btn_s {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
#btn_i {
  width: 125px;
  margin-left: auto;
  margin-right: auto;
}

<div class="form-1">
  <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>

edited Oct 08 '21 at 08:30

YourBrainEatsYou

979
6
16

answered Oct 08 '21 at 05:12

ankit chauhan

5
4

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 08 '21 at 05:31

score 0 · Answer 11 · answered Jul 25 '22 at 17:19

Buttons are by default an inline-block style element. They will not respond to auto. You have to indicate a specific number.

button {
  margin: 6px 50px;
}

(I prefer percentages, they seem to work better)

If, in the case, it must respond to margin: auto, you have to change it to be a block element.

button {
  display: block;
  margin: 6px auto;
}

Center form submit buttons HTML / CSS

11 Answers11

Linked

Related