如何正确对齐表格到中心？

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>

如何正确对齐表格到中心？

How to align the form to the center properly?

html

css

alignment