html - 如何将此搜索表单居中？

Question

我正在尝试将搜索栏居中，这样当人们缩小时它不会转到页面左侧，而是将其自身调整到中心，我尝试添加 <center>在表格之前，它不起作用。我该怎么做才能使搜索表单始终位于中心？

<div class="Nav">
   <a href="../index"><img src="/img/putlockermedia_logo.png" /></a>
   <form action='/search.php' method='GET'> <!-- start of search bar -->
        <input id='searchbar' type='text' name='search' placeholder="search for movies & tv shows" maxlength="50" required />
        <input id='submit' type='submit' name='submit' value='Search' disabled />
   </form>
   <script>
      document.getElementById('searchbar').oninput = function() {
      document.getElementById('submit').disabled = !this.value.trim();
   }
   </script> <!-- end of search bar -->
   <div class="Navbuttons">
     <a href="../shows"><input type="button" name="button" id="button" value="shows" /></a>
     <a href="../movies"><input type="button" name="button" id="button" value="movies" /></a>
   </div>
</div>

CSS:

<style>

.nav
{
    width:100%;
    background: #999;
    height: 40px;
    position: fixed;
    top: 0px;
    min-width: 960px;
    right: 0px;
    left: 0px;
    top: 0px;
}
</style>

Answer 1

您没有在标签的任何 class= 属性中使用 nav。
除了记住这个细节之外，还可以尝试这样的事情:

<div class="myCenter">
    <form action='/search.php' method='GET'> <!-- start of search bar -->
        <input id='searchbar' type='text' name='search' placeholder="search for movies & tv shows" maxlength="50" required />
        <input id='submit' type='submit' name='submit' value='Search' disabled />
    </form>
</div>

剧透:将带有新类的包装 div 添加到表单标签。
与类:

div.myCenter { text-align: center }
div.myCenter form { text-align: left } //optional, if you don't want to see your elements as centered

标签和上帝一样被弃用。