Comment centrer une case à cocher dans une cellule de tableau?
La cellule ne contient qu'une case à cocher. Il est plutôt large en raison 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 ça n'a pas marché. 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 ici c'est 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>
9 réponses
Mettre à jour
Comment à ce sujet... http://jsfiddle.net/gSaPb/
Découvrez 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 cela aide.
Essayez
<td style="text-align:center;">
<input type="checkbox" name="myTextEditBox" value="checked" />
</td>
Essayez ceci, cela devrait fonctionner,
td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}
Cela devrait fonctionner, je l'utilise:
<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
Retirez tous vos CSS en ligne , et déplacez-le vers la tête. Ensuite, Utilisez les classes sur les cellules afin que vous puissiez tout ajuster comme vous le souhaitez (n'utilisez pas un nom comme "center" - vous pouvez le changer en gauche dans 6 mois...). La réponse d'alignement est toujours la même - appliquez-la à la <td> pas à la case à cocher (qui centrerait simplement votre chèque: -))
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>
Si vous ne supportez pas les navigateurs hérités, j'utiliserais flexbox parce qu'il est bien supporté 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 le premier <td> de chaque ligne.
Pour l'écriture dynamique des éléments td et ne pas compter directement sur le style td
<td>
<div style="text-align: center;">
<input type="checkbox">
</div>
</td>
Définissez la propriété float de l'élément check SUR none:
float: none;
Et centrer l'élément parent:
text-align: center;
C'était le seul qui fonctionne pour moi.
Assurez-vous que votre <td> n'est pas display: block;
Flottant fera cela, mais beaucoup plus facile à juste: display: inline;