How do you horizontal align submit button?

Question

How do you make this search button to center align horizontally?

input.search {
    width: 7em; height: 3em;
    float: right;
    padding-right: 10px;
    background-color: #777777;
}

Answer 1

Inputs by default use the display:inline; style, which means that the parent element would need to have text-align:center; like this:

.parent {
  background-color: #404040;
  text-align: center;
  padding: 5px;
}

<div class="parent">
  <input type="submit" class="submit" value="Submit">
</div>

Or alternatively, you can change the display type of the button/input to display:block; and use auto margins like this:

.parent {
  background-color: #404040;
  padding: 5px;
}
.submit {
  display:block;
  width: 100px; /* note that display block will go full width unless you specify otherwise */
  text-align:center;
  margin: auto;
}

<div class="parent">
  <input type="submit" class="submit" value="Submit">
</div>