html - 将搜索框居中对齐

Question

我选择了 a good css/html code用于在网络上实现搜索框。但我无法将搜索框移到中心。下面的 css 代码是关于搜索框的。

#search {
  width: 357px;
  margin: 4px;
}

#search_text{
  width: 297px;
  padding: 15px 0 15px 20px;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  border: 0 none;
  height: 52px;
  margin-right: 0;
  color: white;
  outline: none;
  background: #1f7f5c;
  float: left;
  box-sizing: border-box;
  transition: all 0.15s;
}

<li id="search">
    <form action="" method="get">
    <input type="text" name="search_text" id="search_text" placeholder="Search"/>
    <input type="button" name="search_button" id="search_button"/>
    </form>
</li>

我应该如何修正对齐搜索框的代码？

谢谢。

Answer 1

尝试为您的 body 提供 text-align: center。

引用代码:

body {
  text-align: center;
}

#search {
  width: 357px;
  margin: 4px auto;
  text-align: center;
  display: inline-block;
}

#search_text {
  width: 297px;
  padding: 15px 0 15px 20px;
  font-size: 16px;
  font-family: Montserrat, sans-serif;
  border: 0 none;
  height: 52px;
  margin-right: 0;
  color: white;
  outline: none;
  background: #1f7f5c;
  float: left;
  box-sizing: border-box;
  transition: all 0.15s;
}

<li id="search">
  <form action="" method="get">
    <input type="text" name="search_text" id="search_text" placeholder="Search" />
    <input type="button" name="search_button" id="search_button" />
  </form>
</li>