Comment aligner les cases à cocher et leurs libellés sur plusieurs navigateurs

Question

C'est l'un des problèmes mineurs de CSS qui me tourmente constamment. Comment les personnes situées autour de Stack Overflow alignent-elles verticalementcheckboxeset leurlabelsuniform - multi-navigateur ? Chaque fois que je les aligne correctement dans Safari (en utilisant habituellement vertical-align: baseline sur la input), ils sont complètement désactivés dans Firefox et IE. Corrigez-le dans Firefox, et Safari et IE sont inévitablement perturbés. Je perds du temps à cela chaque fois que je code une forme.

Voici le code standard avec lequel je travaille:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

J'utilise généralement la réinitialisation d'Eric Meyer, les éléments de formulaire sont donc relativement propres. Dans l'attente de conseils ou d'astuces que vous avez à offrir!

Answer 1

Après plus d'une heure d'ajustements, de tests et d'essais de différents styles de balisage, je pense avoir une solution décente. Les exigences pour ce projet particulier étaient:

1. Les entrées doivent être sur leur propre ligne.
2. Les entrées de case à cocher doivent s'aligner verticalement avec le texte de l'étiquette de la même manière (si ce n'est pas identique) dans tous les navigateurs.
3. Si le texte de l'étiquette est renvoyé à la ligne, il doit être mis en retrait (il ne faut donc pas l'enrouler sous la case à cocher).

Avant d'entrer dans les explications, je vais vous donner le code:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Voici l'exemple de travail dans JSFiddle .

Ce code suppose que vous utilisez une réinitialisation, comme celle de Eric Meyer, qui ne remplace pas les marges et le remplissage de la page (par conséquent, les réinitialisations de la marge et du remplissage dans le CSS d'entrée). Évidemment, dans un environnement en direct, vous allez probablement imbriquer/remplacer des éléments pour prendre en charge d'autres éléments d'entrée, mais je voulais que les choses restent simples.

Choses à noter:

• La déclaration *overflow est un hack inline IE (le hack star-property). IE 6 et 7 le remarqueront, mais Safari et Firefox l'ignoreront correctement. Je pense que cela pourrait être valide CSS, mais vous êtes toujours mieux avec des commentaires conditionnels; juste utilisé pour la simplicité.
• Autant que je sache, la seule déclaration vertical-align qui soit cohérente sur tous les navigateurs était vertical-align: bottom. Définir ce paramètre, puis le placer relativement vers le haut, se comportait presque de manière identique dans Safari, Firefox et IE, avec seulement un pixel ou deux de divergence.
• Le problème majeur du travail d’alignement est que IE crée un espace mystérieux autour des éléments d’entrée. Ce n'est pas un rembourrage ou une marge, et c'est sacrément persistant. Définir une largeur et une hauteur sur la case à cocher, puis overflow: hidden, pour une raison quelconque, supprime l'espace supplémentaire et permet au positionnement d'IE d'agir de manière très similaire à Safari et Firefox.
• En fonction de la taille de votre texte, vous aurez sans doute besoin d'ajuster le positionnement relatif, la largeur, la hauteur, etc., pour que tout se passe bien.

J'espère que ceci aide quelqu'un d'autre! Je n'ai pas essayé cette technique spécifique sur des projets autres que celui sur lequel je travaillais ce matin, alors lancez-vous sans hésiter si vous trouvez quelque chose qui fonctionne de manière plus cohérente. 

Answer 2

Parfois, l'alignement vertical a besoin de deux éléments en ligne (span, label, input, etc.) l'un à côté de l'autre pour fonctionner correctement. Les cases à cocher suivantes sont correctement centrées verticalement dans IE, Safari, FF et Chrome, même si la taille du texte est très petite ou grande.

Ils flottent tous côte à côte sur la même ligne, mais nowrap signifie que l'intégralité du texte de l'étiquette reste toujours à côté de la case à cocher.

L'inconvénient est les balises SPAN sans signification supplémentaires. 

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Maintenant, si vous aviez un très long texte d'étiquette qui avait besoin de pour envelopper sans encapsuler sous la case à cocher, vous utiliseriez le remplissage et l'indentation du texte négatif sur les éléments de l'étiquette:

.checkboxes label {
  display: block;
  float: left;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

Answer 3

Travailler avec la solution de One Crayon , j'ai quelque chose qui fonctionne pour moi et qui est plus simple:

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
} 

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Rend pixel par pixel la même chose dans Safari (dont je me fie à la ligne de base) et Firefox et IE7 fonctionnent correctement. Cela fonctionne également pour différentes tailles de police d'étiquettes, grandes et petites. Maintenant, pour fixer la ligne de base d'IE sur les sélections et les entrées ...

---

Update: (édition tierce)

La position bottom appropriée dépend de la famille et de la taille de la police! J'ai trouvé que bottom: .08em; pour les éléments de case à cocher et radio est une bonne valeur générale. Je l'ai testé sous Chrome/Firefox/IE11 sous Windows avec les polices Arial & Calibri et plusieurs tailles de police petites/moyennes/grandes.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Answer 4

Une chose facile qui semble bien fonctionner est d'appliquer un réglage de la position verticale de la case à cocher avec alignement vertical. Cela continuera à varier selon les navigateurs, mais la solution est simple.

input {
    vertical-align: -2px;
}

Référence

Answer 5

essayez vertical-align: middle

aussi votre code semble être comme il se doit:

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

Answer 6

Essayez ma solution. Je l’ai essayée dans IE 6, FF2 et Chrome et le rendu pixel par pixel dans les trois navigateurs.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

Answer 7

La seule solution qui fonctionne parfaitement pour moi est la suivante:

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Testé aujourd'hui sur Chrome, Firefox, Opera, IE 7 et 8. Exemple: Fiddle

Answer 8

J'utilise habituellement la hauteur de ligne pour ajuster la position verticale de mon texte statique:

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

J'espère que cela pourra aider.

Answer 9

Je n'ai pas complètement testé ma solution, mais elle semble bien fonctionner.

Mon HTML est simplement:

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

J'ai ensuite défini toutes les cases à cocher sur 24px pour la hauteur et la largeur. Pour que le texte soit aligné, je crée le line-height de l'étiquette ainsi que 24px et assigne vertical-align: top; comme suit:

EDIT: Après le test IE, j'ai ajouté vertical-align: bottom; à l'entrée et modifié le code CSS de l'étiquette. Vous constaterez peut-être que vous avez besoin d’un cas css conditionnel IE pour régler le remplissage - mais le texte et la zone sont en ligne.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

Si quelqu'un trouve que cela ne fonctionne pas, merci de bien vouloir me le faire savoir. La voici en action (dans Chrome et IE - des excuses pour les captures d'écran réalisées sur la rétine et l'utilisation de parallèles pour IE):

Answer 10

Je pense que c'est le moyen le plus simple

input {
    position: relative;
    top: 1px;
}

Fiddle

Answer 11

Cela fonctionne bien pour moi:

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

Answer 12

Maintenant que la flexbox est supportée par tous les navigateurs modernes, une solution de ce type me semble plus facile.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

Voici la démo complète de la version préfixée:

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

Answer 13

Je n'aime pas le positionnement relatif car cela rend l'élément rendu au-dessus de tout le reste de son niveau (il peut aller au-dessus de quelque chose si vous avez une mise en page complexe).

J'ai découvert que vertical-align: sub rend les cases à cocher assez bien alignées dans Chrome, Firefox et Opera. Je ne peux pas vérifier Safari car je ne dispose pas de MacOS et que IE10 est légèrement désactivé, mais j’ai trouvé cette solution suffisante.

Une autre solution pourrait consister à essayer de créer des CSS spécifiques pour chaque navigateur et de les ajuster avec quelques alignements verticaux dans%/pixels/EMs: http://css-tricks.com/snippets/css/browser -specific-hacks/

Answer 14

Je n'ai jamais eu de problème à le faire comme ça:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Answer 15

La réponse choisie avec plus de 400 votes positifs ne fonctionnait pas pour moi dans Chrome 28 OSX, probablement parce qu’elle n’avait pas été testée sous OSX ou qu’elle fonctionnait dans tout ce qui se passait en 2008 lorsque cette question a reçu une réponse.

Les temps ont changé et de nouvelles solutions CSS3 sont maintenant réalisables. Ma solution utilise pseudoelements pour créer une case à cocher custom. Donc, les stipulations (pour ou contre, quelle que soit votre opinion) sont les suivantes:

• Ne fonctionne que dans les navigateurs modernes (FF3.6 +, IE9 +, Chrome, Safari)
• S'appuie sur une case à cocher conçue sur mesure, qui sera rendue exactement la même chose dans chaque navigateur/système d'exploitation. Ici, je viens de choisir des couleurs simples, mais vous pouvez toujours ajouter des dégradés linéaires, par exemple, pour lui donner plus d’effet.
• S'adapte à une certaine police/taille de police. Si vous la modifiez, il vous suffira de changer le positionnement et la taille de la case à cocher pour qu'elle apparaisse alignée verticalement. Si ajusté correctement, le résultat final devrait toujours être presque identique dans tous les navigateurs/systèmes d'exploitation.
• Pas de propriétés d'alignement vertical, pas de flotteurs
• Doit utiliser le balisage fourni dans mon exemple, cela ne fonctionnera pas si la structure est la même que celle de la question, toutefois, la présentation aura essentiellement la même apparence. Si vous voulez déplacer des objets, vous devez également déplacer le CSS associé.

Votre HTML:

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

Votre CSS:

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

Cette solution masque la case à cocher, et ajoute et définit des pseudoéléments à l’étiquette pour créer la case à cocher visible. Étant donné que l'étiquette est liée à la case à cocher masquée, le champ de saisie sera toujours mis à jour et la valeur sera soumise avec le formulaire.

jsFiddle: http://jsfiddle.net/SgXYY/6/

Et si cela vous intéresse, voici mon point de vue sur les boutons radio: http://jsfiddle.net/DtKrV/2/

J'espère que quelqu'un trouve cela utile!

Answer 16

Je voulais juste ajouter à la discussion sur l'attribut "pour" sur les étiquettes (légèrement offtopic):

Merci de le fournir, même si cela n’est pas nécessaire, car il est très pratique d’utiliser javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

C'est beaucoup plus pratique que d'essayer de déterminer si l'étiquette a une entrée imbriquée, ou si l'entrée est avant l'étiquette, ou après .. etc.

Juste mes 2 cents.

Answer 17

Si vous utilisez ASP.NET Web Forms vous n'avez pas à vous soucier des DIV, des autres éléments ou des tailles fixes. Nous pouvons aligner le texte <asp:CheckBoxList> en définissant float:left avec le type d'entrée CheckboxList dans CSS.

Veuillez vérifier l'exemple de code suivant:

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

Code .ASPX:

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

Answer 18

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

L'astuce consiste à utiliser l'alignement vertical uniquement dans les cellules de tableau ou le bloc inline si vous utilisez une étiquette.

Answer 19

Voyons enfin la source du problème

Les cases à cocher sont rendues à l'aide d'images (on peut en définir des personnalisées via CSS). Voici une case à cocher (non cochée) dans FireFox, mise en surbrillance avec l'inspecteur DOM:

Et voici la même case à cocher sans style dans Chrome:

Vous pouvez voir la marge (orange); le rembourrage n'est pas présent (serait affiché en vert). Alors, quelle est cette pseudo-marge à droite et en bas de la case à cocher? Ce sont des parties de l'image utilisées pour la case à cocher . C'est pourquoi utiliser simplement vertical-align: middle ne suffit pas vraiment et c'est la source des problèmes liés à plusieurs navigateurs.

Alors, que pouvons-nous faire à ce sujet?

Une option évidente est de - remplacer les images! Heureusement, on peut le faire via CSS et remplacer celles-ci par des images externes, des images base64 (in-CSS), in-CSS svg ou simplement des pseudo-éléments. C'est une approche robuste (multi-navigateurs!) Et voici un exemple d'ajustement dérobé de cette question :

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

Vous voudrez peut-être lire des articles plus détaillés sur ce style, dont certains sont énumérés ici ; c'est hors de portée de cette réponse.

D'accord, qu'en est-il de la solution sans images personnalisées ni pseudo-éléments?

TL; DR: on dirait que cela ne fonctionnera pas, utilisez plutôt une case à cocher personnalisée

Tout d'abord, remarquons que si dans d'autres navigateurs ces pseudo-marges à l'intérieur de l'icône de case à cocher étaient arbitraires, il n'y avait pas de solution cohérente. Pour en construire une, nous devons explorer l'anatomie de telles images dans les navigateurs existants.

Alors, quels navigateurs ont les pseudo-marges dans les cases à cocher? J'ai vérifié Chrome 75, Vivaldi 2.5 (à base de chrome), FireFox 54 (ne demandez pas pourquoi si démodé), IE 11, Edge 42, Safari ?? (emprunté un pour une minute, oublié de vérifier la version). Seuls Chrome et Vivaldi disposent de telles pseudo-marges (je soupçonne également tous les navigateurs basés sur Chrome, comme Opera).

Quelle est la taille de ces pseudo-marges? Pour comprendre cela, on peut utiliser une case à cocher agrandie:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

mon résultat est ~ 7% de largeur/hauteur et donc 0.9-1.0px en unités absolues. La précision peut toutefois être mise en doute: essayez différentes valeurs de zoom pour la case à cocher. Dans mes tests à la fois sur Chrome et Vivaldi, la taille relative de la pseudo-marge est très différente à zoom valeurs 10, 20 et aux valeurs 11 à 19 (??):

scale semble être plus cohérent:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

donc probablement ~ 14% et 2px sont les valeurs correctes.

Maintenant que nous connaissons (?) La taille de la pseudo-marge, notons que cela ne suffit pas. La taille des icônes de case à cocher est-elle la même pour tous les navigateurs? Hélas! Voici ce que l'inspecteur DOM affiche pour les cases à cocher sans style:

• FireFox: 13.3px
• À base de chrome: 12.8px pour l'ensemble, d'où 12.8 (100% - 14%) = 11px pour ce qui est perçu visuellement comme une case à cocher
• IE 11, Edge: 13px
• Safari: n/a (ceux-ci devraient être comparés sur le même écran, je crois)

Avant de discuter des solutions ou astuces, demandons-nous: qu'est-ce qu'un alignement correct? Que voulons-nous atteindre? À un certain point, c'est une question de goût, mais en gros, je peux penser aux aspects suivants des "jolis" alignements:

texte et case à cocher sur la même ligne de base (je n’ajuste pas délibérément la taille de la case à cocher ici):

ou ont la même ligne médiane en minuscules:

ou même ligne médiane en majuscules (il est plus facile de voir la différence pour une taille de police différente):

nous devons également décider si la taille de la case à cocher doit être égale à la hauteur d'une lettre minuscule, d'une lettre majuscule ou de quelque chose d'autre (plus grand, plus petit ou entre minuscule et majuscule).

Pour cette discussion, appelons un alignement Nice si la case à cocher se trouve sur la même ligne de base que le texte et a la taille d'une lettre majuscule (un choix très discutable):

Maintenant, quels outils avons-nous pour:

1. ajuster la taille de la case
2. reconnaître Chromium avec sa case à cocher pseudo-marginée et définir des styles spécifiques
3. ajuster l'alignement vertical de la case à cocher/étiquette

?

1. Concernant le réglage de la taille de la case : il y a width, height, size, zoom, scale (ai-je oublié quelque chose? ). zoom et scale ne permettent pas de définir une taille absolue. Ils peuvent donc uniquement aider à ajuster la taille du texte et non à définir la taille du navigateur (sauf si nous pouvons écrire des règles spécifiques au navigateur). size ne fonctionne pas avec Chrome (cela fonctionnait-il avec le vieil Internet Explorer? De toute façon, ce n'est pas si intéressant). width et height fonctionnent dans Chrome et d'autres navigateurs, afin de pouvoir définir une taille commune, mais encore une fois, dans Chrome, il définit la taille de l'ensemble l'image, pas la case à cocher elle-même. Remarque: c'est la taille minimale (largeur, hauteur) qui définit la taille d'une case à cocher (si largeur ≠ hauteur, la zone en dehors de la case à cocher est ajoutée à la "pseudo-marge").

   Malheureusement, les pseudo-marges de la case à cocher Chrome ne sont pas définies sur zéro, quelle que soit leur largeur et leur hauteur, à ma connaissance.

2. Je crains qu'il n'y ait pas de méthode fiable méthode avec CSS uniquement ces jours-ci.

3. Considérons l'alignement vertical. vertical-align ne peut pas donner des résultats cohérents lorsqu'il est défini sur middle ou baseline en raison de la pseudo-marge de Chrome, la seule véritable option permettant d'obtenir le même "système de coordonnées" pour tous les navigateurs est pour aligner l'étiquette et entrer dans le top:

   

   (sur la photo: alignement vertical: haut, bas et bas sans ombrage)

Alors, quel résultat en tirons-nous?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

L'extrait ci-dessus fonctionne avec Chrome (navigateurs à base de chrome), mais la taille de la case à cocher est réduite pour les autres navigateurs. Il semble impossible d'ajuster à la fois la taille et l'alignement vertical de manière à résoudre le problème d'image de la case à cocher de Chromium. Ma dernière suggestion est la suivante: utilisez plutôt des cases à cocher personnalisées - et vous éviterez les frustrations:)

Answer 20

Coder en dur la hauteur et la largeur de la case à cocher, supprimer son remplissage et rendre sa hauteur plus les marges verticales égale à la hauteur de ligne de l'étiquette. Si le texte de l'étiquette est en ligne, cochez la case. Firefox, Chrome et IE7 + rendent tous l'exemple suivant de la même manière: http://www.kornea.com/css-checkbox-align

Answer 21

Si vous utilisez Twitter Bootstrap, vous pouvez simplement utiliser la classe checkbox sur le <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

Answer 22

Avec une case à cocher de type d’entrée enveloppée dans l’étiquette et flottant à gauche, comme ceci:

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

cela a fonctionné pour moi:

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

Assurez-vous que la hauteur de est identique à la hauteur de ligne de (blocklevel).

Answer 23

input[type=checkbox]
{
    vertical-align: middle;
} 

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

Answer 24

Utilisez simplement vertical-align: sub, comme pokrishka déjà suggéré.

Fiddle

Code HTML:

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

Code CSS:

.checkboxes input {
    vertical-align: sub;
}

Answer 25

Je laisse généralement une case à cocher sans étiquette, puis fais de son "étiquette" un élément séparé. C'est pénible, mais il y a tellement de différences entre les navigateurs entre les affichages des cases à cocher et de leurs libellés (comme vous l'avez remarqué), c'est le seul moyen de contrôler le rendu de tout.

Je finis également par le faire dans le développement de winforms, pour la même raison. Je pense que le problème fondamental du contrôle de case à cocher est qu’il s’agit en réalité de deux contrôles différents: la case et l’étiquette. En utilisant une case à cocher, vous laissez le implémenteur du contrôle décider de la manière dont ces deux éléments sont affichés l'un à côté de l'autre (et ils se trompent toujours, où faux = pas ce que vous voulez).

J'espère vraiment que quelqu'un aura une meilleure réponse à votre question.

Answer 26

Je sais donc que plusieurs réponses ont été données à cette question, mais j’estime que j’ai une solution beaucoup plus élégante que celles qui ont déjà été fournies. Et pas seulement 1 solution élégante, mais 2 solutions distinctes pour chatouiller vos envies. Cela dit, tout ce que vous devez savoir et voir est contenu dans 2 JS Fiddle, avec des commentaires.

---

La solution n ° 1 s'appuie sur la "case à cocher" native du navigateur donné, bien qu'avec une torsion ... Elle est contenue dans un div qui est plus facile à positionner sur plusieurs navigateurs, avec un débordement: hidden pour supprimer l'excès d'une case à cocher étirée de 1px (c'est pour que vous ne puissiez pas voir les frontières laides de FF)

HTML simple: (suivez le lien pour examiner le css avec des commentaires, le bloc de code sert à satisfaire le dépassement de pile)http://jsfiddle.net/KQghJ/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

---

La solution n ° 2 utilise la case à cocher "Activer/Désactiver la case à cocher" pour basculer l'état CSS d'une DIV, qui a été correctement positionnée sur le navigateur, et le configurer avec un simple Sprite pour les états non cochés et cochés. Il suffit d’ajuster la position de l’arrière-plan à l’aide de la case à cocher Toggle Hack. Ceci, à mon avis, est la solution la plus élégante, car vous avez plus de contrôle sur vos cases à cocher et vos radios, et vous pouvez garantir qu'elles ont la même apparence sur l'ensemble du navigateur.

HTML simple: (suivez le lien pour passer en revue le CSS avec des commentaires, le bloc de code sert à satisfaire StackOverflow)http://jsfiddle.net/Sx5M2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

---

Si quelqu'un n'est pas d'accord avec ces méthodes, laissez-moi un commentaire, j'aimerais avoir des commentaires sur les raisons pour lesquelles d'autres solutions n'ont pas été trouvées, ou si c'est le cas, pourquoi je ne vois pas de réponse à leur propos? Si quelqu'un voit une de ces méthodes échouer, il serait agréable de le voir aussi, mais celles-ci ont été testées dans les navigateurs les plus récents et reposent sur des méthodes HTML/CSS assez anciennes et universelles à ma connaissance.

Answer 27

CSS:

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML:

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

Le code ci-dessus placera vos éléments de la liste dans trois ordres et changera simplement les largeurs en fonction.

Answer 28

Ce qui suit donne une cohérence parfaite entre les navigateurs, même IE9:

La démarche est assez judicieuse, au point d’être évidente:

1. Créez une entrée et une étiquette.
2. Affichez-les sous forme de bloc pour pouvoir les faire flotter à votre guise.
3. Définissez la hauteur et la hauteur de ligne sur la même valeur pour vous assurer qu'elles sont centrées et alignées verticalement.
4. Pour les mesuresem, pour calculer la hauteur des éléments, le navigateur doit connaître la hauteur de la police de ces éléments et ne pas la définir elle-même en mesures em.

Il en résulte une règle générale applicable à l'échelle mondiale:

input, label {display:block;float:left;height:1em;line-height:1em;}

Avec une taille de police adaptable par formulaire, fieldset ou élément.

#myform input, #myform label {font-size:20px;}

Testé dans les dernières versions de Chrome, Safari et Firefox sur Mac, Windows, Iphone et Android. Et IE9.

Cette méthode est probablement applicable à tous les types d’entrée ne dépassant pas une ligne de texte. Appliquez une règle de type en conséquence.

Answer 29

Merci beaucoup! Cela aussi m'a rendu fou pour toujours. 

Dans mon cas particulier, cela a fonctionné pour moi:

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

J'utilise le reset.css qui peut expliquer certaines différences, mais cela semble bien fonctionner pour moi.

Answer 30

position: relative; a quelques problèmes dans IE avec z-index et des animations telles que slideUp/slideDown de jQuery.

CSS:

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

Le style nécessite probablement des ajustements en fonction de la taille de la police utilisée dans <label>

PS:
J'utilise ie7js pour que les CSS fonctionnent dans IE6. 

Answer 31

<fieldset class="checks">
    <legend>checks for whatevers</legend>
    <input type="" id="x" />
    <label for="x">Label</label>
    <input type="" id="y" />
    <label for="y">Label</label>
    <input type="" id="z" />
    <label for="z">Label</label>
</fieldset>

De toute façon, vous devriez envelopper les contrôles de formulaire regroupés dans leurs propres champs, ici, il joue le wrappa. définir l’entrée/l’étiquette afficher: bloc, entrée flottante à gauche, étiquette flottante à droite, définir vos largeurs, contrôler l’espacement avec les marges gauche/droite, aligner le texte de l'étiquette en conséquence 

alors

fieldset.checks {
    width:200px
}
.checks input, .checks label {
    display:block;
}
.checks input {
    float:right;
    width:10px;
    margin-right:5px
}
.checks label {
    float:left;
    width:180px;
    margin-left:5px;
    text-align:left;
    text-indent:5px
}

vous avez probablement besoin de définir des bordures, des contours et une hauteur de ligne pour les deux solutions multimédias/multi-navigateurs. 

Answer 32

Peut-être que certaines personnes font la même erreur que moi? C’était ... j’avais défini une largeur pour les zones de saisie, car elles étaient pour la plupart de type "texte", mais on a oublié de remplacer cette largeur pour les cases à cocher. il était donc difficile d’aligner une étiquette à côté.

.checkboxlabel {
    width: 100%;
    vertical-align: middle;
}
.checkbox {
    width: 20px !important;
}

<label for='acheckbox' class='checkboxlabel'>
    <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

Donne des étiquettes cliquables et un alignement correct dès IE6 (à l'aide d'un sélecteur de classe) et dans les dernières versions de Firefox, Safari et Chrome

Answer 33

Ce n'est pas la meilleure façon de résoudre le problème

vertical-align: middle

---

Ajouter style="position:relative;top:2px;" à la zone de saisie le déplacerait vers le bas 2px. Donc, en fonction de la taille de votre police, vous pouvez la déplacer.

Answer 34

Solution simple:

<label style="display:block">
  <input style="vertical-align:middle" type="checkbox">
  <span  style="vertical-align:middle">Label</span>
</label>

Testé sous Chrome, Firefox, IE9 +, Safari, iOS 9+

Answer 35

J'ai trouvé que la seule façon de les aligner était d'utiliser la position absolue pour l'entrée. Jouer avec la variable top input a donné le résultat que je voulais.

div {
  clear:    both;
  float:    none;
  position: relative;
}

input {
  left:     5px;
  position: absolute;
  top:      3px;
}

label {
  display:     block;
  margin-left: 20px;
}