用CSS中心搜索欄

我有以下代碼。我有一個搜索，我想在頁面中心。但由於某種原因，它不起作用。
搜索用CSS中心搜索欄

<body> 
     <div> 
      <h1>ADD BUTTON HERE</h1> 
     </div> 
     <div class="box"> 
      <input type="search" id="search" placeholder="Search" /> 
     </div> 
     <hr> 
    </body> 
<html>

我也有下面的CSS

.box{ 
    width: 100%; 
} 

#search { 
    margin: 0 auto; 
    display: inline-block; 
}

我看了一下這衆多的崗位，他們都做margin: 0 auto;但只是ISN」不工作。有什麼我在這裏失蹤？

來源

2015-12-18 mufc

只是將任何東西置於盒子的中心，這樣搜索字段也會居中。

.box{ 
 
    width: 100%; 
 
    text-align:center; 
 
}

<div> 
 
    <h1>ADD BUTTON HERE</h1> 
 
</div> 
 
<div class="box"> 
 
    <input type="search" id="search" placeholder="Search" /> 
 
</div> 
 
<hr>

來源

2015-12-18 20:42:57 nicael

您可以更改顯示從inline-block到block：

#search { 
    margin: 0 auto; 
    display: block; 
}

http://plnkr.co/edit/QGJ2dcqHWNZrCRDbYXtw?p=preview

來源

2015-12-18 20:46:26 jonasnas

.box{ 
    margin-right:auto; 
    margin-left:auto; 
    width:100px; /* Set this property to whatever you like */ 
}

見琴：https://jsfiddle.net/24d153gb/

來源

2015-12-18 20:49:30 IE5Master

用CSS中心搜索欄

回答

相關問題