Search code examples
htmlcsscenteralignment

Center form submit buttons HTML / CSS

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?

Solution

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