html - 在页面中将标签和输入居中

Question

我曾尝试使用 margin: 0 auto 将输入框居中放置在表单中，并且成功了。问题是，由于输入框现在是 block 级元素，输入框和标签没有对齐。他们在另一个之上，就像一个换行符。

所以，我想我可以将每个标签和输入框包装在一个 div 中，它们做的事情与我之前做的一样:margin: 0 auto。不幸的是，输入和标签现在都不想居中。

CSS 代码:

div.center{
	margin: 0 auto;
	display:block
}

如果你们能帮助我，那就太好了。如果有任何需要，我也可以提供我完整的 html 代码和 css 代码。

Answer 1

div.center {
  display: inline-block;
  border: solid;
}
form {
  border: solid;
  text-align: center
}

<form>
  <div class="center">Label</div>
  <input type="text">
</form>