Pourquoi ce CSS ne centre-t-il pas le bouton de soumission sur ce formulaire?

Question

Je veux centrer ce bouton de soumission, en utilisant CSS, et l'ai étudié dans de nombreux autres articles en ligne, mais je n'ai pas encore trouvé de solution, ce qui semble étrange pour quelque chose qui devrait être si simple.

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>

Je l'ai expérimenté avec la suppression de trois autres fichiers CSS, qui sont chargées, qui ne fait aucune différence: le bouton d'envoi refuse de centrer et s'aligne le long de la marge de droite des cases , dans la liste ci-dessus. Toute aide très appréciée!

Answer 1

Annulez simplement la propriété gauche sur l'entrée

#buttonstyle{ 
     left: auto; 
} 

qui u a donné ici

input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

ou vous pouvez tout simplement écrire comme ça

input:not(#buttonstyle){ 
     width:20px; 

     position:relative; 
     left: 150px; 

     vertical-align:middle; 
} 

qui serait plus élégant à pas inclure vos styles de bouton sur les styles de saisie :)

Et ASTUCE pour vous, utiliser les outils de développement web à l'avenir et voir ce qui se passe là-bas, dans 99% des cas vous pouvez résoudre vos problèmes en regardant quels styles vous avez sur des éléments spécifiques :)

espérons que cela vous aide , acclame

Answer 2

Votre propriété left sur input est la cause du désalignement.

Modifier ceci:

input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

à ceci:

#yourdiv input{ 
    width:20px; 

    position:relative; 
    left: 150px; 

    vertical-align:middle; 
} 

Alors que la propriété left: 150px; s'appliquera uniquement aux éléments input sous la #yourdiv div.

---

Lien vers jsFiddle:https://jsfiddle.net/AndrewL32/e0d8my79/101/

Answer 3

Très simplement, tout est à cause de la position:relative ...

Mettez à jour votre bouton à:

<input id="buttonstyle" type="submit" name="submitAdminExport" value="Export" style="position: static;">