Comment aligner les cases à cocher et leurs étiquettes de manière cohérente

Parfois vertical-align besoin de deux inline (span, étiquette, entrée, etc...) éléments à 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 les uns à côté des autres sur la même ligne, mais le nowrap signifie que tout le texte de l'étiquette reste toujours à côté de la case à cocher.

l'inconvénient est la portée supplémentaire dénuée de sens balise.

.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 texte d'étiquette très long que avait besoin de pour envelopper sans envelopper sous la case à cocher, vous utiliseriez un rembourrage et un tiret de texte négatif sur les éléments d'é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>

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>

rend pixel-pour-pixel le même dans Safari (dont la ligne de base je crois) et à la fois Firefox et IE7 vérifier comme bon. Il fonctionne également pour différentes tailles de police d'étiquette, grandes et petites. Maintenant, pour fixer la ligne de base D'IE sur les sélections et les entrées...

une chose facile qui semble bien fonctionner est d'appliquer un réglage de la position verticale de la case à cocher avec alignement vertical. Il sera toujours varier entre les navigateurs, mais la solution est simple.

input {
    vertical-align: -2px;
}

référence

essayer vertical-align: middle

également votre code semble comme il devrait être:

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

essayer ma solution, je l'ai essayé dans IE 6, FF2 et Chrome et il rend 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>

la seule solution qui fonctionne parfaitement pour moi est:

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

testé aujourd'hui en Chrome, Firefox, Opera, IE 7 et 8. Exemple: Violon

j'utilise habituellement la hauteur de la 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>

Espère que ça aide.

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 réglé toutes les cases à cocher sur 24px pour la hauteur et la largeur. Pour faire le texte aligné je fais l'étiquette line-height aussi 24px et assigner vertical-align: top; comme ainsi:

EDIT: Après IE test, j'ai ajouté vertical-align: bottom; à l'entrée et changé l'étiquette du CSS. Vous peut trouver que vous avez besoin d'un cas conditionnel IE css pour trier capitonnage - mais le texte et la boîte 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 découvre que cela ne fonctionne pas, veuillez me le faire savoir. Voici en action (dans Chrome et IE - apologies comme screenshots ont été prises sur retina et en utilisant des parallèles pour IE):

je pense que c'est la façon la plus facile

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

Violon

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>

Je n'aime pas le positionnement relatif parce qu'il fait l'élément rendu au-dessus de tout le reste à son niveau (il peut obtenir quelque chose si vous avez la disposition complexe).

j'ai découvert que vertical-align: sub rend les cases à cocher assez bien alignées en Chrome, Firefox et Opera. Je ne peux pas vérifier le Safari puisque je n'ai pas de MacOS et IE10 est légèrement off, mais je l'ai trouvé pour être assez bonne solution pour moi.

une Autre solution pourrait être d'essayer et créer des CSS spécifiques pour chaque navigateur et les affiner avec un certain alignement vertical en % / pixels/EMs: http://css-tricks.com/snippets/css/browser-specific-hacks /

maintenant que flexbox est pris en charge dans tous les navigateurs modernes, quelque chose comme cela semble comme une approche plus facile pour moi.

<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 version complète préfixée Démo:

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>

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>

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

veuillez le fournir, même si ce n'est pas nécessaire, car il est très pratique à utiliser à partir de javascript:

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

C'est beaucoup plus pratique que d'essayer de comprendre si l'étiquette a l'entrée imbriqués, ou si l'entrée est avant de l'étiquette, ou après.. etc. Et ça ne fait jamais de mal de le fournir.. si.

juste mes 2 cents.

si vous utilisez ASP.NET Web Forms vous ne devez pas vous soucier de DIVs et d'autres éléments ou des tailles fixes. Nous pouvons aligner le texte <asp:CheckBoxList> en mettant float:left sur le type d'entrée CheckboxList dans CSS.

veuillez cocher le code d'exemple 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>

la réponse choisie avec 400 + upvotes n'a pas fonctionné pour moi dans Chrome 28 OSX, probablement parce qu'il n'a pas été testé dans OSX ou qu'il a fonctionné dans ce qui était autour en 2008 quand cette question a été répondue.

les temps ont changé, et de nouvelles solutions CSS3 sont maintenant réalisables. Ma solution utilise pseudoelements pour créer une case à cocher . Donc les stipulations (pour ou contre, peu importe comment vous le regardez) sont les suivantes::

• fonctionne uniquement sur 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 dans chaque navigateur/système D'exploitation. Ici, j'ai choisi quelques couleurs simples, mais vous pouvez toujours ajouter des dégradés linéaires et tel pour lui donner plus d'un coup.
• est adapté à une certaine taille de police / police, qui si changé, vous changeriez simplement le positionnement et la taille de la case à cocher en faire apparaître alignés verticalement. S'il est modifié correctement, le résultat final devrait toujours être proche de exactement le même dans tous les navigateurs / systèmes d'exploitation.
• Non à la verticale-propriétés d'alignement, pas de chars
• doit utiliser le balisage fourni dans mon exemple, il ne fonctionnera pas si structuré comme la question, cependant, la mise en page sera essentiellement la même. Si vous voulez déplacer les choses autour, vous devrez é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 cache la case à cocher , et ajoute et décline des pseudoéléments à l'étiquette pour créer la case à cocher visible. Parce que l'étiquette est liée à la case à cocher cachée, le champ d'entrée sera toujours mis à jour et la valeur sera soumise avec le formulaire.

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

et si vous êtes intéressé, voici mon point de vue sur les boutons radio: http://jsfiddle.net/DtKrV/2 /

Espère que quelqu'un trouve cette pratique!

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

le truc est d'utiliser vertical-align uniquement dans les cellules de tableau ou inline-block si l'utilisation étiquette.

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

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

cochez la hauteur et la largeur de la case à cocher, retirez son rembourrage et faites en sorte que sa hauteur plus les marges verticales soient égales à la hauteur-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 identique: http://www.kornea.com/css-checkbox-align

avec une case à cocher de type entrée enveloppée à l'intérieur de l'étiquette et flottée vers la gauche comme suit:

<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;
}

s'assurer que la hauteur du est identique à la ligne-hauteur du (niveau bloc) .

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

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

je laisse habituellement une case à cocher ouverte et je fais ensuite de son" étiquette " un élément distinct. C'est une douleur, mais il y a tellement de différence entre les navigateurs entre la façon dont les cases à cocher et leurs étiquettes sont affichées (comme vous l'avez remarqué) que c'est la seule façon dont je peux être proche de contrôler l'apparence de tout.

je finis aussi par le faire dans winforms développement, pour la même raison. Je pense que le problème fondamental avec le contrôle de la case à cocher est qu'il est vraiment deux les différents contrôles: la boîte et l'étiquette. En utilisant une case à cocher, vous laissez aux responsables de la mise en œuvre du contrôle le soin de décider comment ces deux éléments sont affichés l'un à côté de l'autre (et ils se trompent toujours, où tort = pas ce que vous voulez).

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

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 articles de liste dans trois outils et juste changer les largeurs pour convenir.

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

Violon

code HTML:

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

Code CSS:

.checkboxes input {
    vertical-align: sub;
}

donc je sais que cela a été répondu plusieurs fois, mais je sens que j'ai une solution beaucoup plus élégante que ceux qui ont été fournis déjà. Et non seulement 1 solution élégante, mais 2 solutions séparées pour chatouiller votre fantaisie. Cela dit, tout ce que vous devez savoir et voir sont contenues dans 2 JS Fiddle, avec des commentaires.

la Solution #1 s'appuie sur la "case à cocher" native du navigateur donné, mais avec une touche... Son contenu dans un div qui est plus facile à positionner cross-browser, avec un débordement: caché pour couper l'excès d'une case à cocher étirée de 1px (c'est pour que vous ne voyiez pas les bordures laides de FF)

simple HTML: (suivre le lien pour examiner la css avec des commentaires, le bloc de code est de satisfaire stackoverflow) http://jsfiddle.net/KQghJ /

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

État CSS D'un DIV, qui a été correctement positionné à travers le navigateur, et la configuration avec un sprite simple pour la case à cocher non vérifié et vérifié États. Tout ce qui est nécessaire est d'ajuster la position d'arrière-plan avec ladite case à cocher Hack. Ceci, à mon avis, est la solution plus élégante que vous avez plus de contrôle sur vos boîtes à cocher & radios, et peut garantir qu'ils regardent la même à travers le navigateur.

HTML simple: (suivre le lien pour examiner la CSS avec des commentaires), code bloc doit 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, veuillez me laisser un commentaire, j'aimerais entendre des commentaires sur les raisons pour lesquelles d'autres n'ont pas trouvé ces solutions, ou s'ils l'ont fait, pourquoi je ne vois aucune réponse ici à leur sujet? Si quelqu'un voit une de ces méthodes échouent, il serait agréable de voir que trop, mais ils ont été testés dans les navigateurs les plus récents et s'appuient sur des méthodes HTML / CSS qui sont assez anciennes, et universelles autant que je l'ai vu.

merci! Ça aussi me rend dingue depuis 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 la réinitialisation.css qui pourrait expliquer certaines de ces différences, mais cela semble bien fonctionner pour moi.

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

vous devriez envelopper les contrôles de forme groupés ensemble dans leurs propres fieldsets de toute façon, ici, il joue le wrappa. définir input / label afficher: bloc, input float left, label float right, définir vos largeurs, contrôler l'espacement avec les marges Gauche/Droite, aligner le texte de l'étiquette en conséquence.

donc

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 mettre la bordure, le contour et la hauteur de ligne sur les deux ainsi que pour les solutions de navigateur/média.

position: relative; a quelques problèmes dans IE avec z-index et des animations comme 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 doit probablement être modifié en fonction de la taille de police utilisée dans <label>

PS:

J'utilise ie7js pour faire le travail css dans IE6.

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

L'approche est tout à fait raisonnable, au point d'être évident:

1. Créer une entrée et une étiquette.
2. les afficher comme bloc, de sorte que vous pouvez les faire flotter comme vous le souhaitez.
3. régler la hauteur et la hauteur de la ligne à la même valeur pour s'assurer qu'elles sont centrées et alignées verticalement.
4. pour em mesures, pour calculer la hauteur des éléments, le navigateur doit connaître la hauteur de la police pour ces éléments, et il ne doit pas être lui-même défini dans les 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 taille de police adaptable par forme, champ ou élément.

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

testé dans les derniers Chrome, Safari, et Firefox sur Mac, Windows, Iphone, et Android. Et IE9.

cette méthode est probablement applicable à tous les types de saisie qui ne sont pas supérieurs à une ligne de texte. Appliquer une règle de type pour convenir.