html - 表单中的居中元素

Question

我试图让我的表单，特别是表单中的字段和文本元素居中对齐，类似于:

Form example

我该怎么做？我试过做

table > tbody  {
    text-align: justify;
    text-align: center;
    background-color: #e8e8e8;

}

这只是以一切为中心(奇怪的是除了字段集)并且没有证明任何东西。任何帮助，将不胜感激。

My Code

Answer 1

虽然这可以说是表格的合理情况，但您可以通过使用标签元素设置为 display:block 来消除表格带来的所有额外标记，这类似于表格列。我经常按以下方式布置我的表格。这还有一个额外的好处，即在小屏幕 View 中，您可以通过移除 float 使标签位于输入。

如果您希望右侧的输入元素(文本、电子邮件、文本区域等)看起来都一样，您必须使用特定的宽度、填充、字体大小等来设置它们的样式以覆盖默认值浏览器样式。否则它们都会有不同的默认宽度。

label, input[type="text"] {
  display: block;
  float: left;
  }
label {
  width: 30%;
  text-align: right;
  margin: 8px;
  clear: left;
  }

input[type="text"] {
  margin: 8px 0;
  }

<form>
<label for="name">Name</label>
<input type="text" name="name">

<label for="phone">Phone</label>
<input type="text" name="phone" placeholder="555-5555">

<label for="email">Email</label>
<input type="text" name="email">
 ...
  </form>