Comment centrer une case à cocher dans une cellule de tableau?

100

La cellule ne contient rien d'autre qu'une case à cocher. Il est assez large à cause du texte dans la ligne d'en-tête du tableau. Comment centrer la case à cocher (avec CSS en ligne dans mon HTML? (Je sais))

j'ai essayé 

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

mais cela n'a pas fonctionné. Qu'est-ce que je fais mal?

Mise à jour: voici une page de test. Quelqu'un peut-il le corriger - avec CSS en ligne dans le HTML - afin que les cases à cocher soient centrées dans leurs colonnes? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>

<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1"   cellpadding="1" cellspacing="1">

  <tr>
    <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
  </tr>

  <tr>
    <td>
        <input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">    
    </td>

    <td>
      myTextEditBox
    </td>

    <td>
       <select size ="1" name="myTextEditBox_compare_operator">
        <option value="=">equals</option>
        <option value="<>">does not equal</option>
       </select>
    </td>

    <td>
      <input type="text" name="myTextEditBox_compare_value">
    </td>

    <td>
      <input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
    </td>

  </tr>

</table>


</body>
</html>

J'ai accepté la réponse de @ Hristo - et la voici avec le formatage en ligne ... 

<table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

    <tr>
        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="query_myTextEditBox">    
        </td>

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

        <td style="text-align: center; vertical-align: middle;">
            <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>

    </tr>

</table>
html css Mawg dit de réintégrer Monica
la source
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "checked"> </td> le fera fonctionner dans IE8,9. Cependant, dans IE10 ou chrome, la case à cocher ou la radiobox est définie dans une case, que vous la voyiez ou non. La boîte sera toujours alignée à gauche. Mais à l'intérieur de la zone de définition, la case à cocher ou la radio est centrée. Si la largeur du TD contenant est 100px, la case à cocher est 50px, alors elle est toujours alignée à gauche. Pour centrer la case à cocher, vous pouvez faire en sorte que la case de définition de la case à cocher soit de 100 pixels, ce qui correspond à la même largeur que le TD contenant.
qeq

Réponses:

111

METTRE À JOUR

Que diriez-vous de cela ... http://jsfiddle.net/gSaPb/

Consultez mon exemple sur jsFiddle: http://jsfiddle.net/QzPGu/

HTML

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

CSS

td {
  text-align: center; /* center checkbox horizontally */
  vertical-align: middle; /* center checkbox vertically */
}
table {
  border: 1px solid;
  width: 200px;
}
tr {
  height: 80px;   
}

J'espère que ça aide.

Hristo
la source
2
+1 Merci, mais cela ne semble pas fonctionner dans mon exemple. S'il vous plaît voir la question mise à jour
Mawg dit de réintégrer Monica le
+1 Cela fonctionne. J'ai publié le code mis à jour - avec une mise en forme en ligne - ci-dessus. Maintenant, je dois juste faire une comparaison de fichiers et déterminer la différence qui fait que cela fonctionne., Merci
Mawg dit de réintégrer Monica le
Fermer, mais semble légèrement décalé avec ma table bootstrap-4. L'en-tête de colonne est définitivement centré, mais la case à cocher est un peu à gauche du centre
Addison Klinke
27

Essayer

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
Andrew Marshall
la source
+1 Merci, mais cela ne semble pas fonctionner dans mon exemple. S'il vous plaît voir la question mise à jour
Mawg dit de réintégrer Monica le
1
Je viens de tester votre code mis à jour en utilisant ma solution dans Chrome 9 et cela fonctionne.
Andrew Marshall
+1 Si cela fonctionne dans MS IE et FireFox et que vous publiez le code ici, alors la réponse est à vous.
Mawg dit de réintégrer Monica le
23

Essayez ceci, cela devrait fonctionner,

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
Prabhakaran S
la source
10

Cela devrait fonctionner, je l'utilise:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
Miloš
la source
1
@Gerard, qui parle ici du HTML5?
Miloš
5

Pour l'écriture dynamique des éléments td et ne pas s'appuyer directement sur le style td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
Carlos E
la source
Peut-être plutôt <span> que <div>?
Mawg dit de réintégrer Monica
1
div est un élément de bloc; sa valeur d'affichage par défaut est «block». Avec span, l'entrée continue à gauche. Test pour voir la différence
Carlos E
Une bonne explication, qui aidera les autres à l'avenir (+1) Bienvenue à bord
Mawg dit réintégrer Monica
4

Tirez TOUS vos CSS en ligne et déplacez-les vers la tête. Ensuite, utilisez des classes sur les cellules pour que vous puissiez tout ajuster comme vous le souhaitez (n'utilisez pas un nom comme "centre" - vous pouvez le changer pour gauche dans 6 mois ...). La réponse d'alignement est toujours la même - appliquez-la à <td>la case PAS à la case à cocher (cela ne ferait que centrer votre chèque :-))

Utilisation de votre code ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><input type="checkbox" name="query_myTextEditBox"></td>
        <td>
          myTextEditBox
        </td>
        <td>
           <select size ="1" name="myTextEditBox_compare_operator">
            <option value="=">equals</option>
            <option value="<>">does not equal</option>
           </select>
        </td>
        <td><input type="text" name="myTextEditBox_compare_value"></td>
        <td class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>
Dawson
la source
2
N'oubliez pas ... a tdest un type d'élément "spécial". Il a ses propres comportements uniques - comme un mariage en bloc et en ligne (de l'enfer).
Dawson
3

Si vous ne supportez pas les navigateurs hérités, j'utiliserais flexboxparce qu'il est bien pris en charge et résoudra simplement la plupart de vos problèmes de mise en page.

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

Cela centre tout le contenu dans la première <td>de chaque ligne.

Rick Smith
la source
1

Définissez la propriété float de l'élément check sur none:

float: none;

Et centrez l'élément parent:

text-align: center;

C'était le seul qui fonctionne pour moi.

Plastónico
la source
Un "float: left;" hérité le ruinait pour moi. Le réglage "float: none" l'a corrigé.
jornhd
0 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>
Développer l'extrait

Sergey
la source
-2

Assurez-vous que votre <td>n'est pasdisplay: block;

Le flottant fera cela, mais il est beaucoup plus facile de simplement: display: inline;

Askrich
la source