I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging.
td.class > div {
width: 100%;
height: 100%;
overflow: hidden;
height: 20px;
}
#buttonstyle {
border: 2px solid #777777;
background: #019966;
color: black;
font: bold 18px'Trebuchet MS';
padding: 4px;
cursor: pointer;
width: 150px;
border-radius: 12px;
display: inline-block;
margin: 0px auto;
}
.buttonHolder {
text-align: center;
}
.heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #006633;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
input[type=text] {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
input[type=date] {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
ul {
list-style: none;
text-align: left;
}
input {
width: 20px;
position: relative;
left: 150px;
vertical-align: middle;
}
label {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}<form name="InstructorForm" action="../instructorDB_protected/instructorDB_controller.php" method="post" enctype="multipart/form-data">
<div id='content'>
<center>
<span class="heading">Colorado Mountain Club - Boulder Group Instructor Database<br>Instructor Administrator Export Form</span>
</p>
<p>
Select which schools to export to a file to download.
<br>The file will contain a list of instructor names, emails and phone numbers:
<p>
<div id="yourdiv" style="display: inline-block;">
<ul>
<li>
<input type="checkbox" name="avi_instructor">
<label>Avalanche:</label>
</li>
<li>
<input type="checkbox" name="hiking_instructor">
<label>Hiking:</label>
</li>
<li>
<input type="checkbox" name="ice_instructor">
<label>Ice:</label>
</li>
<li>
<input type="checkbox" name="rock_instructor_trad">
<label>Rock, Trad:</label>
</li>
<li>
<input type="checkbox" name="rock_instructor_sport">
<label>Rock, Sport:</label>
</li>
<li>
<input type="checkbox" name="ski_instructor">
<label>Ski:</label>
</li>
<li>
<input type="checkbox" name="snow_instructor">
<label>Snow:</label>
</li>
</ul>
</div>
<br>
<div class="buttonHolder">
<input id=buttonstyle type="submit" name="submitAdminExport" value="Export">
</div>
<br>
<a href="../instructorDB_protected/instructorDB_top.php" target="_self">Return to top</a>
</center>
</div>
</form>Despite my attempts at removing other CSS files in order to troubleshoot, the submit button continues to resist being centered and instead aligns itself along the right margin of the checkboxes above it in the list. Any assistance on resolving this issue would be greatly appreciated!