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
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
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
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
source
10

Cela devrait fonctionner, je l'utilise:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
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
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
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
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
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
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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.