Questo è uno dei problemi CSS minori che mi affligge costantemente. In che modo le persone intorno a Stack Overflow si allineano verticalmente checkboxese il loro browser èlabels costantemente incrociato ? Ogni volta che li allineo correttamente in Safari (di solito usando vertical-align: baselinesul input), sono completamente spenti in Firefox e IE. Risolvilo in Firefox e Safari e IE sono inevitabilmente incasinati. Perdo tempo ogni volta che scrivo un modulo.

Ecco il codice standard con cui lavoro:

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

Di solito uso il ripristino di Eric Meyer, quindi gli elementi del modulo sono relativamente puliti dalle sostituzioni. In attesa di suggerimenti o trucchi che hai da offrire!

Dopo oltre un'ora di messa a punto, test e diversi stili di markup, penso che potrei avere una soluzione decente. I requisiti per questo particolare progetto erano:

1. Gli input devono essere sulla propria riga.
2. Gli input della casella di controllo devono essere allineati verticalmente con il testo dell'etichetta in modo simile (se non identico) su tutti i browser.
3. Se il testo dell'etichetta si sposta, deve essere rientrato (quindi non andare a capo sotto la casella di controllo).

Prima di entrare in qualsiasi spiegazione, ti darò solo il codice:

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>

Ecco l'esempio funzionante in JSFiddle .

Questo codice presuppone che tu stia utilizzando un ripristino come Eric Meyer che non sovrascrive i margini di input e il padding (quindi inserendo i reset di margin e padding nel CSS di input). Ovviamente in un ambiente live probabilmente anniderai / sovrascriverai cose per supportare altri elementi di input, ma volevo mantenere le cose semplici.

Cose da notare:

• La *overflowdichiarazione è un hack IE inline (l'hack di proprietà stellare). Sia IE 6 che 7 lo noteranno, ma Safari e Firefox lo ignoreranno correttamente. Penso che potrebbe essere un CSS valido, ma stai ancora meglio con i commenti condizionali; l'ho usato solo per semplicità.
• Come meglio posso dire, l'unica vertical-alignaffermazione coerente tra i browser era vertical-align: bottom. L'impostazione di questo e il relativo posizionamento verso l'alto si sono comportati in modo quasi identico in Safari, Firefox e IE con solo un pixel o due di discrepanza.
• Il problema principale nel lavorare con l'allineamento è che IE attacca un mucchio di spazio misterioso attorno agli elementi di input. Non è imbottitura o margine ed è dannatamente persistente. L'impostazione di una larghezza e altezza sulla casella di controllo e quindi overflow: hiddenper qualche motivo taglia lo spazio extra e consente al posizionamento di IE di agire in modo molto simile a Safari e Firefox.
• A seconda del dimensionamento del testo, senza dubbio dovrai regolare il posizionamento, la larghezza, l'altezza e così via per far apparire le cose nel modo giusto.

Spero che questo aiuti qualcun altro! Non ho provato questa tecnica specifica su nessun progetto diverso da quello a cui stavo lavorando stamattina, quindi sicuramente fai un salto se trovi qualcosa che funziona in modo più coerente.

A volte l'allineamento verticale necessita di due elementi in linea (span, label, input, ecc ...) uno accanto all'altro per funzionare correttamente. Le seguenti caselle di controllo sono correttamente centrate verticalmente in IE, Safari, FF e Chrome, anche se le dimensioni del testo sono molto piccole o grandi.

Galleggiano tutti uno accanto all'altro sulla stessa linea, ma il nowrap significa che l'intero testo dell'etichetta rimane sempre accanto alla casella di controllo.

Il rovescio della medaglia sono i tag SPAN senza significato extra.

.checkboxes label {
  display: inline-block;
  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>

Ora, se avessi un testo di etichetta molto lungo che doveva essere avvolto senza essere spostato sotto la casella di controllo, avresti usato il riempimento e il rientro del testo negativo sugli elementi dell'etichetta:

.checkboxes label {
  display: block;
  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 so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</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>

Elaborazione della soluzione di One Crayon , ho qualcosa che funziona per me ed è più semplice:

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

Esegue il rendering pixel per pixel allo stesso modo in Safari (di cui mi fido baseline) e sia Firefox che IE7 vanno bene. Funziona anche con varie dimensioni di caratteri per etichette, grandi e piccole. Ora, per fissare la linea di base di IE su selezioni e input ...

Aggiornamento: (Modifica di terze parti)

La bottomposizione corretta dipende dalla famiglia e dalla dimensione del carattere! Ho scoperto che usare la bottom: .08em;casella di controllo e gli elementi radio è un buon valore generale. L'ho testato in Chrome / Firefox / IE11 in Windows con i caratteri Arial & Calibri utilizzando diverse dimensioni di caratteri piccoli / medi / grandi.

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

Una cosa semplice che sembra funzionare bene è applicare una regolazione della posizione verticale della casella di controllo con allineamento verticale. Sarà comunque variabile tra i browser, ma la soluzione è semplice.

input {
    vertical-align: -2px;
}

Riferimento

provare vertical-align: middle

anche il tuo codice sembra che dovrebbe essere:

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

Prova la mia soluzione, l'ho provato in IE 6, FF2 e Chrome e rende pixel per pixel in tutti e tre i browser.

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

L'unica soluzione perfettamente funzionante per me è:

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

Testato oggi su Chrome, Firefox, Opera, IE 7 e 8. Esempio: violino

Non ho completamente testato la mia soluzione, ma sembra funzionare alla grande.

Il mio HTML è semplicemente:

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

Ho quindi impostato tutte le caselle di controllo 24pxsia per altezza che per larghezza. Per rendere il testo allineato faccio l'etichetta è line-heightanche 24pxe assegnare vertical-align: top;in questo modo:

EDIT: dopo il test IE ho aggiunto vertical-align: bottom;l'input e modificato il CSS dell'etichetta. Potresti scoprire che hai bisogno di un caso IE css condizionale per risolvere il riempimento, ma il testo e la casella sono in linea.

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

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

Se qualcuno scopre che non funziona, per favore fatemi sapere. Eccolo in azione (in Chrome e IE - ci scusiamo perché sono stati presi screenshot sulla retina e usando paralleli per IE):

Di solito uso l'altezza della linea per regolare la posizione verticale del mio testo statico:

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>

Spero che aiuti.

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

Il trucco è usare l'allineamento verticale solo nelle celle della tabella o il blocco in linea se si usa il tag label.

Diamo finalmente un'occhiata alla fonte del problema

Le caselle di controllo vengono visualizzate utilizzando le immagini (è possibile impostare quelle personalizzate tramite CSS). Ecco una casella (non selezionata) in FireFox, evidenziata con la finestra di ispezione DOM:

Ed ecco la stessa casella di controllo non modificata in Chrome:

Puoi vedere il margine (arancione); l'imbottitura non è presente (sarebbe mostrata in verde). Cos'è questo pseudo-margine a destra e in fondo alla casella di controllo? Queste sono parti dell'immagine utilizzata per la casella di controllo . Ecco perché l'utilizzo vertical-align: middlenon è sufficiente e questa è la fonte dei problemi tra browser.

Quindi cosa possiamo fare al riguardo?

Un'opzione ovvia è: sostituire le immagini! Fortunatamente, è possibile farlo tramite CSS e sostituire quelli con immagini esterne, immagini base64 (in-CSS), svg in-CSS o semplicemente pseudo-elementi. È un approccio solido (cross-browser!), Ed ecco un esempio di tale regolazione sottratta a questa domanda :

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

Potresti voler leggere alcuni articoli più approfonditi su tale stile come alcuni elencati qui ; è fuori dalla portata di questa risposta.

Ok, cosa ne pensi della soluzione no-custom-images-or-pseudo-elements?

TL; DR: sembra che non funzionerà, usa invece la casella di controllo personalizzata

Innanzitutto, notiamo che se in altri browser quelle pseudo-margini all'interno dell'icona della casella di controllo fossero arbitrarie, non ci sarebbe soluzione coerente. Per costruirne una, dobbiamo esplorare l'anatomia di tali immagini nei browser esistenti.

Quindi quali browser hanno gli pseudo-margini nelle caselle di controllo? Ho verificato Chrome 75, Vivaldi 2.5 (basato su Chromium), FireFox 54 (non chiedermi perché non è aggiornato), IE 11, Edge 42, Safari ?? (preso in prestito uno per un minuto, ho dimenticato di controllare la versione). Solo Chrome e Vivaldi hanno tali pseudo-margini (sospetto che anche tutti i browser basati su Chromium, come Opera).

Qual è la dimensione di quegli pseudo-margini? Per capirlo è possibile utilizzare una casella di controllo ingrandita:

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

<input type=checkbox>

il mio risultato è ~ 7% di larghezza / altezza e quindi 0,9-1,0 px in unità assolute. L'accuratezza può essere messa in discussione, tuttavia: provare diversi valori di zoomper la casella di controllo. Nei miei test sia su Chrome che su Vivaldi la dimensione relativa dello pseudo-margine è molto diversa ai zoomvalori 10, 20 e ai valori 11-19 (??):

scale sembra essere più coerente:

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

<input type=checkbox>

quindi probabilmente ~ 14% e 2px sono i valori corretti.

Ora che conosciamo (?) La dimensione dello pseudo-margine, notiamo che questo non è abbastanza. Le dimensioni delle icone della casella di controllo sono le stesse per tutti i browser? Ahimè! Ecco cosa mostra l'ispettore DOM per le caselle di controllo non stilate:

• FireFox: 13.3px
• A base di cromo: 12,8 px per tutto, quindi 12,8 (100% - 14%) = px per ciò che è visivamente percepito come casella di controllo
• IE 11, Edge: 13px
• Safari: n / a (questi dovrebbero essere confrontati sullo stesso schermo, credo)

Ora, prima di discutere qualsiasi soluzione o trucco, chiediamo: cos'è un corretto allineamento ? Cosa stiamo cercando di ottenere? A un certo punto è una questione di gusti, ma fondamentalmente posso pensare ai seguenti aspetti di "simpatici" allineamenti:

testo e casella di controllo sulla stessa linea di base (non modifico deliberatamente le dimensioni della casella di controllo qui):

o hanno la stessa linea mediana in termini di lettere minuscole:

o la stessa linea di mezzo in termini di lettere maiuscole (è più facile vedere la differenza per le diverse dimensioni del carattere):

e dobbiamo anche decidere se la dimensione della casella di controllo deve essere uguale all'altezza di una lettera minuscola, una lettera maiuscola o qualcos'altro (più grande, più piccolo o tra lettere minuscole e maiuscole).

Per questa discussione chiamiamo un allineamento piacevole se la casella di controllo si trova sulla stessa linea di base del testo e ha le dimensioni di una lettera maiuscola (una scelta altamente discutibile):

Ora quali strumenti dobbiamo:

1. regola le dimensioni della casella di controllo
2. riconoscere Chromium con la sua casella di controllo pseudo-marginata e impostare stili specifici
3. regola la casella di controllo / etichetta allineamento verticale

?

1. Per quanto riguarda la regolazione delle dimensioni casella di controllo : ci sono width, height, size, zoom, scale(ho ho perso qualcosa?). zoome scalenon consentono di impostare dimensioni assolute, quindi possono essere utili solo per adattarsi alle dimensioni del testo, non impostare le dimensioni tra browser (a meno che non possiamo scrivere regole specifiche per browser). sizenon funziona con Chrome (ha funzionato con il vecchio IE? comunque, non è poi così interessante). widtheheight funziona in Chrome e altri browser, quindi possiamo impostare una dimensione comune, ma di nuovo, in Chrome imposta la dimensione dell'intera immagine, non la casella stessa. Nota: è minimo (larghezza, altezza) che definisce le dimensioni di una casella di controllo (se larghezza ≠ altezza, l'area esterna al riquadro della casella di controllo viene aggiunta a "pseudo-margine").

   Una cosa spiacevole è che la casella di controllo pseudo-margini in Chrome non è impostata su zero per qualsiasi larghezza e altezza, per quanto posso vedere.

2. Temo non ci sia un metodo affidabile solo CSS al giorno d'oggi.

3. Consideriamo l'allineamento verticale. vertical-alignnon può fornire risultati coerenti quando impostato su middleo a baselinecausa dello pseudo-margine di Chrome, l'unica vera opzione per ottenere lo stesso "sistema di coordinate" per tutti i browser è allineare l'etichetta e l'input a top:

   

   (nella foto: allineamento verticale: superiore, inferiore e inferiore senza ombra)

Quindi quale risultato otteniamo da questo?

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

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

Lo snippet sopra funziona con Chrome (browser basati su Chromium), ma altri browser richiedono una dimensione inferiore della casella di controllo. Sembra impossibile regolare sia le dimensioni sia l'allineamento verticale in modo da aggirare la stranezza dell'immagine della casella di controllo di Chromium. Il mio ultimo suggerimento è: usa invece caselle di controllo personalizzate - ed eviterai la frustrazione :)

Ora che flexbox è supportato in tutti i browser moderni, qualcosa del genere mi sembra un approccio più semplice.

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

Ecco la demo completa della versione con prefisso:

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>

Penso che questo sia il modo più semplice

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

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

Non mi piace il posizionamento relativo perché rende l'elemento reso sopra ogni altra cosa al suo livello (può ottenere qualcosa in più se hai un layout complesso).

Ho scoperto che vertical-align: subrende le caselle di controllo abbastanza allineate in Chrome, Firefox e Opera. Non riesco a controllare Safari poiché non ho MacOS e IE10 è leggermente spento, ma ho trovato che è una soluzione abbastanza buona per me.

Un'altra soluzione potrebbe essere quella di provare a creare CSS specifici per ogni browser e perfezionarli con un po 'di allineamento verticale in% / pixel / EM: http://css-tricks.com/snippets/css/browser-specific-hacks/

Questo funziona bene per me:

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>

La risposta scelta con oltre 400 voti non ha funzionato per me in Chrome 28 OSX, probabilmente perché non è stata testata in OSX o ha funzionato in qualsiasi cosa fosse nel 2008 quando è stata data risposta a questa domanda.

I tempi sono cambiati e ora sono possibili nuove soluzioni CSS3. La mia soluzione utilizza pseudoelementi per creare una casella di controllo personalizzata . Quindi le clausole (pro o contro, comunque la guardi) sono le seguenti:

• Funziona solo con browser moderni (FF3.6 +, IE9 +, Chrome, Safari)
• Si basa su una casella di controllo progettata su misura, che sarà resa esattamente la stessa in ogni browser / sistema operativo. Qui ho appena scelto alcuni colori semplici, ma potresti sempre aggiungere gradienti lineari e simili per dargli un botto.
• È adattato a una determinata dimensione del carattere / carattere, che se modificato, cambieresti semplicemente il posizionamento e la dimensione della casella di controllo per renderla allineata verticalmente. Se ottimizzato correttamente, il risultato finale dovrebbe essere quasi identico in tutti i browser / sistemi operativi.
• Nessuna proprietà di allineamento verticale, nessun galleggiante
• Devo usare il markup fornito nel mio esempio, non funzionerà se strutturato come la domanda, tuttavia, il layout avrà essenzialmente lo stesso aspetto. Se vuoi spostare le cose, dovrai anche spostare il CSS associato

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

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

Questa soluzione nasconde la casella di controllo e aggiunge e modifica gli pseudoelementi sull'etichetta per creare la casella di controllo visibile. Poiché l'etichetta è legata alla casella di controllo nascosta, il campo di input verrà comunque aggiornato e il valore verrà inviato con il modulo.

E se sei interessato, ecco la mia opinione sui pulsanti di opzione : http://jsfiddle.net/DtKrV/2/

Spero che qualcuno lo ritenga utile!

Non ho mai avuto problemi a farlo in questo modo:

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

Se si utilizzano i moduli Web ASP.NET non è necessario preoccuparsi dei DIV e di altri elementi o dimensioni fisse. Possiamo allineare il <asp:CheckBoxList>testo impostando float:leftil tipo di input CheckboxList in CSS.

Controlla il seguente codice di esempio:

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

Codice .ASPX:

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

Se stai usando Twitter Bootstrap, puoi semplicemente usare la checkboxclasse su <label>:

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

Con una casella di controllo di tipo input inserita all'interno dell'etichetta e spostata a sinistra in questo modo:

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

questo ha funzionato per me:

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

Assicurati che l'altezza del sia identica all'altezza della linea (blocklevel).

Hardcode l'altezza e la larghezza della casella di controllo, rimuovere la sua imbottitura e rendere la sua altezza più i margini verticali pari all'altezza della linea dell'etichetta. Se il testo dell'etichetta è in linea, deseleziona la casella di controllo. Firefox, Chrome e IE7 + visualizzano tutti in modo identico il seguente esempio: http://www.kornea.com/css-checkbox-align

Di solito lascio una casella senza etichetta e quindi faccio la sua "etichetta" un elemento separato. È una seccatura, ma c'è così tanta differenza tra i browser tra come vengono visualizzate le caselle di controllo e le loro etichette (come hai notato) che questo è l'unico modo in cui posso avvicinarmi a controllare l'aspetto di tutto.

Finisco anche per farlo nello sviluppo di winform, per lo stesso motivo. Penso che il problema fondamentale con il controllo checkbox sia che si tratta in realtà di due controlli diversi: il box e l'etichetta. Usando una casella di controllo, lo stai lasciando agli implementatori del controllo per decidere come questi due elementi vengono visualizzati uno accanto all'altro (e lo sbagliano sempre, dove errato = non quello che vuoi).

Spero davvero che qualcuno abbia una risposta migliore alla tua domanda.

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>

Il codice sopra inserirà le voci dell'elenco in tre controlli e cambierà semplicemente le larghezze per adattarle.

Quanto segue offre una coerenza dei pixel perfetta tra i browser, anche IE9:

L'approccio è abbastanza sensato, al punto di essere ovvio:

1. Crea un input e un'etichetta.
2. Visualizzali come blocchi, in modo da poterli fluttuare come preferisci.
3. Impostare l'altezza e l'altezza della linea sullo stesso valore per assicurarsi che siano centrate e allineate verticalmente.
4. Per le misurazioni em , per calcolare l'altezza degli elementi, il browser deve conoscere l'altezza del carattere per quegli elementi e non deve essere impostato da solo nelle misurazioni em.

Ciò si traduce in una regola generale applicabile a livello globale:

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

Con dimensione del carattere adattabile per modulo, fieldset o elemento.

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

Testato negli ultimi Chrome, Safari e Firefox su Mac, Windows, Iphone e Android. E IE9.

Questo metodo è probabilmente applicabile a tutti i tipi di input che non sono superiori a una riga di testo. Applica una regola di tipo adatta.

Quindi so che è stato risposto molte volte, ma sento di avere una soluzione molto più elegante di quelle che sono già state fornite. E non solo 1 soluzione elegante, ma 2 soluzioni separate per solleticare la tua fantasia. Detto questo, tutto ciò che devi sapere e vedere è contenuto in 2 JS Fiddle's, con commenti.

La soluzione n. 1 si basa sulla "casella di controllo" nativa di un determinato browser, anche se con una svolta ... È contenuta in un div che è più facile posizionare il browser incrociato, con un overflow: nascosto per tagliare l'eccesso di una casella di controllo allungata di 1px (questo è così non puoi vedere i brutti confini di FF)

HTML semplice: (segui il link per rivedere i CSS con commenti, il blocco di codice è per soddisfare lo stackoverflow) http://jsfiddle.net/KQghJ/

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

La soluzione n. 2 utilizza "Checkbox Toggle Hack" per attivare / disattivare lo stato CSS di un DIV, che è stato correttamente posizionato sul browser e configurato con un semplice sprite per gli stati non selezionati e selezionati. Tutto ciò che serve è regolare la posizione di sfondo con detta casella di controllo Attiva / Disattiva hack. Questa, a mio avviso, è la soluzione più elegante in quanto hai un maggiore controllo su caselle di controllo e radio e puoi garantire che abbiano lo stesso aspetto sul browser.

HTML semplice: (segui il link per rivedere il CSS con commenti, il blocco di codice è per soddisfare StackOverflow) http://jsfiddle.net/Sx5M2/

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

Se qualcuno non è d'accordo con questi metodi, per favore lasciami un commento, mi piacerebbe sentire un feedback sul perché gli altri non hanno trovato queste soluzioni, o se hanno, perché non vedo risposte qui riguardo a loro? Se qualcuno vede uno di questi metodi fallire, sarebbe bello vederlo anche questo, ma questi sono stati testati negli ultimi browser e si basano su metodi HTML / CSS abbastanza vecchi e universali per quanto ne ho visto.

Yay grazie! Anche questo mi ha fatto impazzire per sempre.

Nel mio caso particolare, questo ha funzionato per me:

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

Sto usando reset.css che potrebbe spiegare alcune delle differenze, ma questo sembra funzionare bene per me.

position: relative; presenta alcuni problemi in IE con z-index e animazioni come slideUp / slideDown di 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');
    }
});

Lo stile probabilmente ha bisogno di modifiche a seconda della dimensione del carattere utilizzato in <label>

PS:
Uso ie7js per far funzionare i CSS in IE6.

Usa semplicemente vertical-align: sub, come pokrishka già suggerito .

Violino

Codice HTML:

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

Codice CSS:

.checkboxes input {
    vertical-align: sub;
}

Soluzione semplice:

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

Testato su Chrome, Firefox, IE9 +, Safari, iOS 9+