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

要使margin auto工作，您需要指定特定的宽度。我的解决方案：

    #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;
  }

中心表格框css

7 个答案: