html - 你如何水平对齐提交按钮？

Question

如何让这个搜索按钮水平居中对齐？

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

Answer 1

默认情况下，输入使用 display:inline; 样式，这意味着父元素需要像这样具有 text-align:center;:

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

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

或者，您可以将按钮/输入的显示类型更改为 display:block; 并像这样使用自动边距:

.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>