I'm currently working on a form design where the submit button always appears at the bottom and centered. However, I am facing an issue with centering it properly.
To achieve this layout, I have been using text-align: center in the parent div and positioning the button at the bottom using position: absolute along with bottom: 20px. Despite implementing these styles, I noticed that the button is slightly off-center. I would appreciate some insight into why this is happening and how I can fix it.
HTML:
<div class='container'>
<form>
<p>
<input name='group 1' type='radio' id='1' />
<label for='1'>option 1</label>
</p>
<p>
<input name='group 1' type='radio' id='2' />
<label for='2'>option 2</label>
</p>
<p>
<input name='group 2' type='radio' id='3' />
<label for='3'>option 1</label>
</p>
<p>
<input name='group 1' type='radio' id='4' />
<label for='4'>option 1</label>
</p>
<button type='submit'>
Submit
</button>
</form>
</div>
CSS:
.container {
width: 400px;
height: 400px;
border: 2px solid red;
text-align: center;
}
button {
position: absolute;
bottom: 20px;
}