Center form submit buttons HTML / CSS

html css center alignment
Belgin Fish picture Belgin Fish · Nov 19, 2010 · Viewed 340.9k times · Source

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?

Answer

Sebastian Patane Masuelli picture Sebastian Patane Masuelli · Nov 19, 2010

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

Related questions

How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
Aligning multiple images horizontally in the center of a div

I have a div and I want to align in the center of that div multiple images. All of the images have the same height and width of 16px. The problem is that I can either center them and have …

Read More
How to design a CSS for a centered floating confirm dialog?

I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page. Tried that, but it's not 'always centered' at all, since the position is fixed: .Popup { text-align:center; position: absolute; …

Read More