如何正确地将表格与中心对齐？

Question

我可以手动设置form宽度，但<input>宽度的每次更改都会导致问题，特别是我应该再次调整表格宽度。我需要可扩展的对齐，即input宽度的变化不应影响表单的对齐。

form {
    width: 400px;
    margin: 0 auto;
}
[type=text] {
    /* width: 100px; */
}
canvas {
    display: block;
    margin: 10px auto;
    border: 1px dashed gray;
}

<form>
    <input type="text"   id="left"/>
    <input type="submit" value=">>"/>
    <input type="text"   id="right"/>
</form>
<canvas width="40" height="200"></canvas>

Answer 1

您可以将form设置为display:table，而不需要设置width。

form {
    margin: 0 auto;
    display: table;
}

<form>
    <input type="text" id="left"/>
    <input type="submit" value="&gt;&gt;"/>
    <input type="text" id="right"/>
</form>