Center Form Submit Buttons HTML/Css

Center form submit buttons HTML / CSS

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

How to I center my submit button in CSS?

Here's the working fiddle: https://jsfiddle.net/qptgsc1e/

Just some minor changes, Replace this CSS and HTML and you're good to go.

If you want to see the code changes Check it here

form{
float:left;
display:block;
width:50%;
}
input {
display: block;
margin-bottom:1em;
width: 50%;
}
input[type='submit']{
width:30%;
margin:0 auto;
}
textarea#feedback {
display: block;
margin-bottom:1em;
width:50%;
}
.submit-wrap{
width:50%;
}

<form role="form">
<div class="form">
<form>
<label for="Name">Name*</label>
<input type="form" name="Name" id="" value="" required><br>
<label for="Email">Email*</label>
<input type="email" name="email" id= value"" required>  <br>
<label for="Experience">Experience*</label><br>
<textarea rows="2" id="feedback">
</textarea><br>
<div class="submit-wrap"><input type="submit" value="Apply Now"></div>
</div>
</form>

Aligning a button to the center

You should use something like this:

<div style="text-align:center">  
    <input type="submit" />  
</div>

Or you could use something like this. By giving the element a width and specifying auto for the left and right margins the element will center itself in its parent.

<input type="submit" style="width: 300px; margin: 0 auto;" />

Center Align Submit button

You can make use of display:table and display:table-cell, property. But in this case you have to remove floats and give specific width.

HTML

<div id="form">
  <form method="post" action="google.php">
      <div class='wrap'>
   <textarea rows="3" cols="40"></textarea>
      </div>
       <div class='wrap_2'>
<input type="submit"/>
      </div>
  </form>
</div>

CSS

#form{
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
 display:table;
}

div.wrap, 
div.wrap_2 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.wrap {
    width:500px 
}

FIDDLE:

http://jsfiddle.net/7gnMu/

How can I align this submit button using CSS

If you want the button to be aligned to the right, you can set the parent td for the submit button to colspan="2" so that the cell will span both columns in your table, and assign text-align: right;

h1 {

    text-align: center;

    color: blue;

}

body {

     background-color: #1AD5EA;

     text-align: center;

}

form {

    display: inline-block;

    text-align: center;

    }

td {

 /* text-align: center; */

  font-weight: bold;

}

input[type=submit] {

    padding:5px 55px;  

    border:5 none;

    border-radius: 15px;

    text-align:center; 

}

.submit {

  text-align: right;

}

<html>

<head>

  <link rel="stylesheet" type="text/css" href="estilo.css">

<title>Nuevo cliente</title>

</head>

<body>

<h1>Introduzca los datos del nuevo cliente</h1>

<br/>

<form  action="procesar_form.php" method="post">

                <table> 

                    <tr>

                        <td>Nombre</td>

                        <td><input type="text" name="nombre"></td>

                    </tr> 

                    <tr>

                        <td>Dirección</td>

                        <td><input type="text" name="direccion"></td>

                    </tr>

                     <tr> 

                        <td>Tel</td> 

                        <td><input type="text" name="tel"></td> 

                    </tr>

                    <tr> 

                        <td colspan="2" class="submit"> 

                            

                            <input align="center" type="submit" value="Enviar"> 

                        </td> 

                    </tr> 

                </table> 

        </form>

</body>

</html>

How can I centre a Contact Form and its Submit button in the page?

Just update your Contact-box class like this:

.Contact-box {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

Center Submit button

Remove float from tag button and a and add text-align to class buttons

Try this demo:

.buttons a,

.buttons button {

  display: inline-block;

  margin: 0 7px 0 0;

  background-color: #f5f5f5;

  border: 1px solid #dedede;

  border-top: 1px solid #eee;

  border-left: 1px solid #eee;

  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;

  font-size: 12px;

  line-height: 130%;

  text-decoration: none;

  font-weight: bold;

  color: #565656;

  cursor: pointer;

  padding: 5px 10px 6px 7px;

  /* Links */

}

.buttons button {

  width: auto;

  overflow: visible;

  padding: 4px 10px 3px 7px;

  /* IE6 */

}

.buttons button[type] {

  padding: 5px 10px 5px 7px;

  /* Firefox */

  line-height: 17px;

  /* Safari */

}

*:first-child+html button[type] {

  padding: 4px 10px 3px 7px;

  /* IE7 */

}

.buttons button img,

.buttons a img {

  margin: 0 3px -3px 0 !important;

  padding: 0;

  border: none;

  width: 16px;

  height: 16px;

}

button:hover,

.buttons a:hover {

  background-color: #dff4ff;

  border: 1px solid #c2e1ef;

  color: #336699;

}

.buttons a:active {

  background-color: #6299c5;

  border: 1px solid #6299c5;

  color: #fff;

}

button.positive,

.buttons a.positive {

  color: #529214;

}

.buttons a.positive:hover,

button.positive:hover {

  background-color: #E6EFC2;

  border: 1px solid #C6D880;

  color: #529214;

}

.buttons a.positive:active {

  background-color: #529214;

  border: 1px solid #529214;

  color: #fff;

}

.buttons a.negative,

button.negative {

  color: #d12f19;

}

.buttons a.negative:hover,

button.negative:hover {

  background: #fbe3e4;

  border: 1px solid #fbc2c4;

  color: #d12f19;

}

.buttons a.negative:active {

  background-color: #d12f19;

  border: 1px solid #d12f19;

  color: #fff;

}

button.regular,

.buttons a.regular {

  color: #336699;

}

.buttons a.regular:hover,

button.regular:hover {

  background-color: #dff4ff;

  border: 1px solid #c2e1ef;

  color: #336699;

}

.buttons a.regular:active {

  background-color: #6299c5;

  border: 1px solid #6299c5;

  color: #fff;

}

.buttons {

  text-align: center;/*added this line*/

}

<body>

  <form name="form1" method="post" action="">

    <div class="buttons">

      <button type="submit" class="positive" name="save">

        <img src="apply2.png" alt="Sample Image" />Save

      </button>

      <a href="" class="regular">

        <img src="textfield_key.png" alt="Sample Image" />Change Password

      </a>

      <a href="" class="regular">

        <img src="downloads.png" alt="Sample Image" />Downloads

      </a>

      <a href="#" class="negative">

        <img src="cross.png" alt="Sample Image" />Cancel

      </a>

    </div>

  </form>

</body>

Center Form Submit Buttons HTML/Css