中心表單框css

Question

我有以下表單框代碼

<form method="GET">
<input type="text" name="q" class="input center search" />
<input type="submit" class="btn submit">
</form>

我如何將表單框和提交按鈕居中？ 我試過margin:auto ， margin 0 auto和text-align:center 。 我究竟做錯了什么？

Answer 1

要使自動邊距起作用，您需要指定特定的寬度。 我的解決方案：

 #form { width: 200px; margin-left: auto; margin-right: auto; }

 <form method="GET" id="form"> <input type="text" name="q" class="input center search" /> <input type="submit" class="btn submit"> </form>

Answer 2

你可以做

 form{ display:block; text-align:center; border:1px solid; padding:10px; }

 <form method="GET"> <input type="text" name="q" class="input center search" /> <input type="submit" class="btn submit"> </form>

Answer 3

將其放入div並使用以下設置：

（你可以在輸入元素之間添加一個<br>標簽，如果你想讓它們相互下方，就像我在下面所做的那樣。如果沒有，只需刪除該標簽）

 .x { text-align: center; } form { display: inline-block; text-align: center; }

 <div class="x"> <form method="GET"> <input type="text" name="q" class="input center search" /> <br> <input type="submit" class="btn submit"> </form> </div>

Answer 4

將輸入放入div ，然后將text-align:center添加到div 。

 .myInputs { text-align: center; } form { border: 1px solid black; padding:20px; }

 <form method="GET"> <div class="myInputs"> <input type="text" name="q" class="input center search" /> <input type="submit" class="btn submit"> </div> </form>

如果您想在新行上添加提交按鈕，只需在提交按鈕前添加一個<br/>即可。

Answer 5

只需將您的表單添加到具有以下 ID 的 div 標簽中：-

 #inner{ display: table; margin: auto; }

 <div id="inner"> <form method="GET"> <input type="text" name="q" class="input center search" /> <input type="submit" class="btn submit"> </form> </div>

Answer 6

要水平和垂直居中框，您可以使用 CSS 代碼

    .input center search {
         position: relative;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
    }

要僅將框水平居中，請使用代碼

    .input center search {
         position: relative;
         left: 50%;
         transform: translate(-50%);
    }

Answer 7

這將完美地工作：

form{
  display:block;
  text-align:center;
  width:450px;
margin: 0 auto;
  }

input{
  text-align:center;
display: block;
width:120px;
  }