How to align the form to the center properly?

Question

I can set the form width manually but every changes in the <input> width will lead to the troubles, specifically I'll be should adjust form width again. I need scalable alignment ie changes in input width shouldn't impact on the form's alignment.

 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

You can set the form to display:table , and don't need to set the width at all.

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

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