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

Question

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

Demandé el 19 de Février, 2011: Quand la question a-t-elle été
70358 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

La cellule ne contient rien d'autre qu'une case à cocher. Elle est assez large à cause du texte de la ligne d'en-tête du tableau. Comment puis-je centrer la case à cocher (avec une 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 ça n'a pas marché. Qu'est-ce que je fais de mal ?

Mise à jour : voici une page de test. Quelqu'un peut-il la corriger - avec une 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>

Demandé el 19 de Février, 2011 par Mawg

1 votes

<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 boîte, que vous voyiez la boîte ou non. La boîte sera toujours alignée à gauche. Mais à l'intérieur de la boîte de définition, la case à cocher ou la radio est centrée. Si la largeur du TD contenant est de 100px, la case à cocher est de 50px, alors elle est toujours alignée à gauche. Pour centrer la case à cocher, vous pouvez faire en sorte que la zone de définition de la case à cocher soit de 100px, ce qui correspond à la même largeur que le TD contenant.

Commenté el 31 de Janvier, 2017 par qeq

Answer 1

5 Réponses

Answer 2

130voto

Hristo Points 12268

Que pensez-vous de ça... http://jsfiddle.net/gSaPb/

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

td {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

table {
  border: 1px solid;
  width: 200px;
}

tr {
  height: 80px;
}

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

Répondu el 19 de Février, 2011 par Hristo (12268 Points )

2 votes

+1 Merci, mais cela ne semble pas fonctionner dans mon exemple. Veuillez voir la question mise à jour

Commenté el 19 de Février, 2011 par Mawg

0 votes

+1 Cela fonctionne. J'ai posté le code mis à jour - avec le formatage en ligne - ci-dessus. Il ne me reste plus qu'à faire des comparaisons de fichiers et à trouver la différence qui fait que ça marche Merci.

Commenté el 19 de Février, 2011 par Mawg

0 votes

Proche, mais semble légèrement décalé avec mon tableau bootstrap-4. L'en-tête de colonne est bien centré, mais la case à cocher est un peu à gauche du centre.

Commenté el 17 de Juillet, 2020 par Addison Klinke

Answer 3

32voto

Andrew Marshall Points 43955

Essayez

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

Répondu el 19 de Février, 2011 par Andrew Marshall (43955 Points )

0 votes

+1 Merci, mais cela ne semble pas fonctionner dans mon exemple. Veuillez voir la question mise à jour

Commenté el 19 de Février, 2011 par Mawg

2 votes

Je viens de tester votre code mis à jour en utilisant ma solution dans Chrome 9 et cela fonctionne.

Commenté el 19 de Février, 2011 par Andrew Marshall

0 votes

+1 Si cela fonctionne dans MS IE et FireFox et que vous postez le code ici, alors la réponse est à vous.

Commenté el 19 de Février, 2011 par Mawg

Answer 4

24voto

Prabhakaran S Points 31

Essayez ça, ça devrait marcher,

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

Répondu el 18 de Novembre, 2013 par Prabhakaran S (31 Points )

Answer 5

11voto

Miloš Points 3427

Cela devrait fonctionner, je l'utilise :

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>

Répondu el 14 de Juin, 2012 par Miloš (3427 Points )

1 votes

@Gerard, qui parle ici du HTML5 ?

Commenté el 8 de Octobre, 2013 par Miloš

Answer 6

4voto

Dawson Points 5490

Retirez TOUTES vos CSS en ligne et le déplacer vers la tête. Puis utiliser les classes sur les cellules afin que vous puissiez tout ajuster comme vous le souhaitez (n'utilisez pas un nom comme "centre" - vous pourriez le changer en gauche dans 6 mois...). La réponse concernant l'alignement est toujours la même - appliquez-le à la cellule <td> PAS la case à cocher (cela ne ferait que centrer le contrôle :-) )

En utilisant 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>

Répondu el 19 de Février, 2011 par Dawson (5490 Points )

2 votes

N'oubliez pas... un td est un type d'élément "spécial". Il a ses propres comportements uniques - comme un bloc et un mariage en ligne (de l'enfer).

Commenté el 19 de Février, 2011 par Dawson

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: