如何在父div中居形式？

Question

在我的表格中，标签/输入与浮动和固定宽度对齐。因此，我的标签有空白空间，这使得难以将表格置于父div中。

我如何将此表格集中在一起？

#Form1Layout {
  font-family: Verdana;
  font-size: 10pt;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
}

#Form1Layout label {
  text-align: right;
  padding-right: 10px;
  width: 80px;
}

#Form1Layout input {
  width: 300px;
}

#Form1Layout label,
#Form1Layout input {
  display: block;
  float: left;
  margin-bottom: 10px;
}

#Form1Layout br {
  clear: both;
}

<div>
  <div id="Form1Layout">
    <label>User name:</label><input type="text" /><br>
    <label>Address:</label><input type="text" /><br>
    <label>Phone:</label><input type="text" /><br>
    <label></label><button class="My_Button">Submit</button>
  </div>
</div>

Answer 1

使用flexboxes。这是一个简单的例子。

（我故意增加输入的高度以向您展示它是如何工作的）。

#Form1Layout {
  font-family: Verdana;
  font-size: 10pt;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#Form1Layout > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
}

#Form1Layout label {
  text-align: right;
  padding-right: 10px;
  width: 80px;
}

#Form1Layout input {
  width: 300px;
  height: 80px;
}

<div>
  <div id="Form1Layout">
    <div><label>User name:</label><input type="text" /></div>
    <div><label>Address:</label><input type="text" /></div>
    <div><label>Phone:</label><input type="text" /></div>
    <div><label></label><button class="My_Button">Submit</button></div>
  </div>
</div>