定義寬度時，“邊距：0自動”不起作用

Question

我當時正在為我的網站創建一個搜索工具，但我希望它位於中心位置，所以我創建了一個主要的div容器，該容器可容納每個搜索工具元素，該元素的margin: 0 auto運行。 但是里面有另一個有margin: 0 auto;元素margin: 0 auto; 不會居中。

HTML：

<div class="searchbox">
        <div class="mover">
           <input type="text" name="searchfield" class="search" placeholder="Search Item">

CSS：

.searchbox {
  position: absolute;
  width: 100%;
  overflow: hidden;
  left: 0%;
  top: 55px;
  height: 350px;
  background-color: black;
}
.mover {
  display: block;
  z-index: 2;
  background-color: white;
  margin: 0 auto;
  width: 70%;
  height: 100%;
  min-width: 600px;
  height: 250px;
}
.search {
  position: relative;
  width: 70%;
  height: 35px;
  top: 100px;
  margin: 0 auto;
  border: solid 1px black;
  border-radius: 7px;
}
.search[type=text] {
  color: black;
  text-align: center;
  font-family: 'Lato';
  font-size: 15px;
}

請注意，我不希望width: 100%為搜索元素的width: 100% ，正如您在代碼中看到的那樣，我已定義了min-width: 600px像素，這是針對mover中其他元素的，在這種情況下不相關。

請退房， 小提琴

可能是什么問題？ 我已經在兩個元素上定義了寬度，但是margin auto仍然不起作用，有什么辦法可以解決這個問題？

Answer 1

<input>是一個內聯級別的元素， margin: auto技巧僅適用於塊級別的元素。

你可以做：

.search {
  ...
  width: 70%;
  margin: 0 auto;
  display: block; /*add this line*/
}

或者，如果您希望將其保留為內聯，則可以執行以下操作：

.mover {
  text-align: center;
}