I'm having trouble centering a pair of buttons inside a form. These buttons are enclosed within a <div> with display: inline-block, so the <div> is only as wide as the buttons themselves. The parent element to this <div> is a <form> with a fixed width of 290px.
Despite setting
margin-left: auto; margin-right: auto<div>, it doesn't seem to center within the <form>. I even tried applying display: block to the <form> without success.
What am I missing here?
Here's the HTML structure:
<form id="schemeForm">
<!--Other HTML elements-->
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
And the corresponding CSS:
#schemeForm {
width: 290px;
display: block;
}
#formButtons {
display: inline-block; /*to make it only as wide as buttons*/
margin-left: auto;
margin-right: auto;
}
Check out this example code snippet for reference:
#schemeForm {
width: 290px;
display: block;
background-color: black;
}
#formButtons {
display: inline-block; /*to make it only as wide as buttons*/
margin-left: auto;
margin-right: auto;
background-color: orange;
}<html>
<body>
<form id="schemeForm">
<!--Other HTML elements-->
<div id="formButtons">
<input type="button" value="Back" />
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>