Question

我正在尝试将表单（特别是表单中的字段和文本元素）设置为中心对齐，类似于：

我该怎么做呢？我试过了

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

}

这最终只是集中了所有内容（除了字段集，奇怪的是）并且没有任何理由。任何帮助，将不胜感激。

My Code

Answer 1

虽然对于表来说这可以说是一个合理的情况，但是你可以通过使用设置为display:block的标签元素来消除表带来的所有额外标记，这类似于表列。我经常以下面的方式列出我的表格。这样做的另一个好处是，在小屏幕视图中，您可以通过取走浮动来在输入上方标记。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

中心对齐表单中的元素

1 个答案: