如何将提交按钮水平对齐？

Question

如何使这个搜索按钮在水平方向上居中对齐？

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

- TriggeredNope

---

你需要改变按钮容器的样式，而不是按钮的样式。你需要将容器样式更改为text-align:center。 - Koby Douek

请发布有问题的代码：包含按钮和相关CSS的容器。 - beerwin

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>

- Frits

Answer 2

这是你所需要的吗？

.full-width {
  text-align:center;
  width:100%;
  float:left;
  background:#404040;
  padding:5px;
}

<div class="full-width">
  <input type="button" value="search" />
</div>  

- Jishnu V S

Answer 3

你可以使用居中标签

<center>
<input type="button" value="search"/>
</center>

- Tomer Wolberg

---

虽然一些浏览器仍然支持<center>标签，但在HTML5中已被弃用。希望这不会让人感到奇怪，也许您可以将其添加到您的答案中，我可以从评论中删除它？ - Frits