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

Question

如何使此搜索按钮水平居中对齐？

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

Answer 1

这就是你需要的吗？

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

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用中心标记

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