Center form submit buttons HTML / CSS

html css center alignment

378,882

Solution 1

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

Solution 2

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.

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

378,882

Belgin Fish

Updated on July 05, 2022

Comments

Belgin Fish almost 2 years

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?

Admin about 10 years

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...
masmrdrr almost 9 years

Works perfectly for me when I used it for a CSS styled button link. Wrap the <a href> with the div and class and it should work perfectly without affecting different classes.
stepik21 almost 7 years

Absolutely agree with you, this is best solution, thanks! +1
Gawie Greef almost 6 years

You need to set the margin on the button as well. margin: 0 auto;
charles-allen over 4 years

Gah... display: block... always forget that!
IamBatman over 3 years

Ummm, bad practice to use inline JavaScript.
Nagev over 3 years

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 over 3 years

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.
Chris Walker about 3 years

The thing I really like about this answer is that it explains why the problem was happening in the first place.
Admin over 2 years

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.