Question

如何使用CSS集中所有表单标签和输入字段？

如何在输入字段顶部为带有标签文本（块）的表单执行此操作？

#fieldset label {
    display: block;    
}

#fieldset input {
    font-size: 0.8em;
    height: 1.2em;
    width: 15em;
}

Answer 1

form {
  text-align: center;
}

这取决于您的HTML和当前的CSS。以上是一个起点。

Answer 2

正如Boldewyn和Ben所说，text-align将使内联项目（例如跨度）居中。要将块元素（例如div和形式和段落）居中，请为其指定宽度并将margin-right和margin-left设置为auto。

理解difference between block and inline elements。

非常重要

Answer 3

用于表单标签和输入的常用“居中”实际上是2列，标签右对齐，输入字段左对齐。

没有表格的一种方法是给标签元素提供相同的宽度并右对齐它们，例如：

<style type="text/css">
  .foolabel{width:10em;text-align:right;display:inline-block;margin-right:1em;}
  .formlist{list-style:none}
</style>
<ul class="formlist">
  <li><label class="foolabel">Name:</label><input type="text" /></li>
  <li><label class="foolabel">Quest:</label><input type="text" /></li>
  <li><label class="foolabel">Favorite Color:</label><input type="text" /></li>
</ul>

使用CSS将所有HTML表单元素居中

3 个答案: