Este é um dos pequenos problemas de CSS que me atormenta constantemente. Como as pessoas em torno do Stack Overflow se alinham verticalmente checkboxese seus navegadoreslabels constantemente ? Sempre que eu os alinhar corretamente no Safari (geralmente usando no ), eles estão completamente desativados no Firefox e no IE. Corrija-o no Firefox e o Safari e o IE estão inevitavelmente bagunçados. Eu perco tempo com isso toda vez que codifico um formulário.vertical-align: baselineinput

Aqui está o código padrão com o qual trabalho:

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

Eu geralmente uso a redefinição de Eric Meyer, portanto, os elementos do formulário são relativamente limpos de substituições. Ansioso por dicas ou truques que você tem para oferecer!

Depois de mais de uma hora ajustando, testando e tentando diferentes estilos de marcação, acho que posso ter uma solução decente. Os requisitos para este projeto em particular foram:

1. As entradas devem estar em sua própria linha.
2. As entradas da caixa de seleção precisam alinhar verticalmente com o texto do rótulo de maneira semelhante (se não idêntica) em todos os navegadores.
3. Se o texto do rótulo for agrupado, ele precisará ser recuado (para que não ocorra embaixo da caixa de seleção).

Antes de entrar em qualquer explicação, darei o código a você:

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>

Aqui está o exemplo de trabalho no JSFiddle .

Este código pressupõe que você esteja usando uma redefinição como a de Eric Meyer, que não substitua as margens e o preenchimento do formulário (colocando as redefinições de margem e preenchimento no CSS de entrada). Obviamente, em um ambiente ao vivo, você provavelmente estará aninhando / substituindo coisas para apoiar outros elementos de entrada, mas eu queria manter as coisas simples.

Coisas a serem observadas:

• A *overflowdeclaração é um hack do IE em linha (o hack da propriedade em estrela). Tanto o IE 6 quanto o 7 notarão, mas o Safari e o Firefox o ignorarão adequadamente. Eu acho que pode ser CSS válido, mas você ainda está melhor com comentários condicionais; apenas usei por simplicidade.
• O melhor que posso dizer é que a única vertical-aligndeclaração consistente entre os navegadores foi vertical-align: bottom. A configuração e o posicionamento relativamente ascendente se comportaram quase de maneira idêntica no Safari, Firefox e IE, com apenas um ou dois pixels de discrepância.
• O principal problema ao trabalhar com o alinhamento é que o IE ocupa um monte de espaço misterioso em torno dos elementos de entrada. Não é preenchimento ou margem, e é malditamente persistente. Definir uma largura e altura na caixa de seleção e, overflow: hiddenpor algum motivo, corta o espaço extra e permite que o posicionamento do IE atue de maneira muito semelhante ao Safari e Firefox.
• Dependendo do tamanho do texto, você sem dúvida precisará ajustar o posicionamento relativo, a largura, a altura e assim por diante para fazer com que as coisas pareçam corretas.

Espero que isso ajude alguém! Eu não tentei essa técnica específica em nenhum projeto além daquele em que estava trabalhando hoje de manhã, então, definitivamente, se você encontrar algo que funcione de forma mais consistente.

Às vezes, o alinhamento vertical precisa de dois elementos em linha (extensão, etiqueta, entrada, etc ...) próximos um do outro para funcionar corretamente. As caixas de seleção a seguir estão centralizadas verticalmente corretamente no IE, Safari, FF e Chrome, mesmo se o tamanho do texto for muito pequeno ou grande.

Todos flutuam um ao lado do outro na mesma linha, mas o agorarap significa que todo o texto do rótulo sempre fica ao lado da caixa de seleção.

A desvantagem são as tags SPAN extras sem sentido.

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

Agora, se você tivesse um texto de rótulo muito longo que precisasse quebrar sem quebrar sob a caixa de seleção, usaria preenchimento e recuo de texto negativo nos elementos do rótulo:

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

Trabalhando com a solução de One Crayon , tenho algo que funciona para mim e é mais simples:

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

Renderiza pixel por pixel o mesmo no Safari (cuja linha de base eu confio) e o Firefox e o IE7 são bons. Também funciona para vários tamanhos de fonte de etiqueta, grandes e pequenos. Agora, para fixar a linha de base do IE nas seleções e entradas ...

Atualização: (Edição de terceiros)

A bottomposição correta depende da família e do tamanho da fonte! Descobri que usar elementos bottom: .08em;de caixa de seleção e rádio é um bom valor geral. Eu testei no Chrome / Firefox / IE11 no Windows com fontes Arial e Calibri usando vários tamanhos de fonte pequenos / médios / 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>

Uma coisa fácil que parece funcionar bem é aplicar um ajuste na posição vertical da caixa de seleção com alinhamento vertical. Ainda haverá variações entre os navegadores, mas a solução é simples.

input {
    vertical-align: -2px;
}

Referência

tentar vertical-align: middle

também seu código parece que deveria ser:

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

Experimente a minha solução, tentei no IE 6, FF2 e Chrome e renderiza pixel por pixel nos três navegadores.

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

A única solução perfeitamente funcional para mim é:

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

Testado hoje em Chrome, Firefox, Opera, IE 7 e 8. Exemplo: Fiddle

Eu não testei completamente minha solução, mas parece funcionar muito bem.

Meu HTML é simplesmente:

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

Em seguida, defino todas as caixas de seleção 24pxpara altura e largura. Para tornar o texto alinhado eu faço a etiqueta é line-heighttambém 24pxe atribuirvertical-align: top; assim:

EDIT: Após o teste do IE, adicionei vertical-align: bottom;à entrada e alterei o CSS do rótulo. Você pode achar que precisa de um caso condicional do IE css para classificar o preenchimento - mas o texto e a caixa estão alinhados.

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 alguém achar que isso não funciona, entre em contato. Aqui está em ação (no Chrome e no IE - desculpas por capturas de tela na retina e usando paralelos no IE):

Eu costumo usar a altura da linha para ajustar a posição vertical do meu texto estático:

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>

Espero que ajude.

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

O truque é usar o alinhamento vertical apenas nas células da tabela ou o bloco embutido se estiver usando a etiqueta label.

Vamos finalmente dar uma olhada na fonte do problema

As caixas de seleção são renderizadas usando imagens (é possível definir as personalizadas via CSS). Aqui está uma caixa de seleção (desmarcada) no FireFox, destacada com o inspetor DOM:

E aqui está a mesma caixa de seleção não estilizada no Chrome:

Você pode ver a margem (laranja); estofamento não está presente (seria mostrado em verde). Então, qual é essa pseudo-margem à direita e na parte inferior da caixa de seleção? Essas são partes da imagem usada para a caixa de seleção . É por isso que usar simplesmente vertical-align: middlenão é suficiente e essa é a fonte dos problemas entre navegadores.

Então o que podemos fazer sobre isso?

Uma opção óbvia é - substitua as imagens! Felizmente, é possível fazer isso via CSS e substituí-lo por imagens externas, imagens base64 (em CSS), svg em CSS ou apenas pseudoelementos. É uma abordagem robusta (entre navegadores!), E aqui está um exemplo de tal ajuste roubado desta pergunta :

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

Você pode ler alguns artigos mais detalhados sobre esse estilo, como alguns listados aqui ; está fora do escopo desta resposta.

Ok, ainda e quanto à solução sem imagens personalizadas ou pseudo-elementos?

TL; DR: parece que isso não vai funcionar, use a caixa de seleção personalizada

Primeiro, vamos observar que, em outros navegadores, essas pseudo-margens dentro do ícone da caixa de seleção eram arbitrárias, não havia solução consistente. Para criar uma, precisamos explorar a anatomia de tais imagens nos navegadores existentes.

Então, quais navegadores têm as pseudo-margens nas caixas de seleção? Eu verifiquei o Chrome 75, Vivaldi 2.5 (baseado em cromo), FireFox 54 (não pergunte por que está desatualizado), IE 11, Edge 42, Safari? (emprestou um por um minuto, esqueceu de verificar a versão). Somente o Chrome e o Vivaldi têm essas pseudo-margens (suspeito que todos os navegadores baseados no Chromium também, como o Opera).

Qual é o tamanho dessas pseudo-margens? Para descobrir isso, pode-se usar uma caixa de seleção ampliada:

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

<input type=checkbox>

meu resultado é ~ 7% da largura / altura e, portanto, 0,9-1,0px em unidades absolutas. A precisão pode ser questionada: tente valores diferentes de zoompara a caixa de seleção. Nos meus testes no Chrome e no Vivaldi, o tamanho relativo da pseudo-margem é muito diferente nos zoomvalores 10, 20 e 11-19 (??):

scale parece ser mais consistente:

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

<input type=checkbox>

então provavelmente ~ 14% e 2px são os valores corretos.

Agora que sabemos (?) O tamanho da pseudo-margem, vamos observar que isso não é suficiente. Os tamanhos dos ícones da caixa de seleção são iguais para todos os navegadores? Ai! Aqui está o que o inspetor DOM mostra para caixas de seleção sem estilo:

• FireFox: 13.3px
• Baseado em cromo: 12,8px para a coisa toda, portanto, 12,8 (100% - 14%) = 11px para o que é visualmente percebido como caixa de seleção
• IE 11, Borda: 13px
• Safari: n / a (acho que deve ser comparado na mesma tela)

Agora, antes de discutirmos quaisquer soluções ou truques, vamos perguntar: o que é um correto alinhamento ? O que estamos tentando alcançar? Até certo ponto, é uma questão de gosto, mas basicamente posso pensar nos seguintes aspectos "agradáveis" dos alinhamentos:

texto e caixa de seleção na mesma linha de base (deliberadamente não ajusto o tamanho da caixa de seleção aqui):

ou tem a mesma linha do meio em termos de letras minúsculas:

ou a mesma linha do meio em termos de letras maiúsculas (é mais fácil ver a diferença para diferentes tamanhos de fonte):

e também temos que decidir se o tamanho da caixa de seleção deve ser igual à altura de uma letra minúscula, maiúscula ou outra coisa (maior, menor ou entre minúscula e maiúscula).

Para esta discussão, vamos chamar um alinhamento de bom se a caixa de seleção estiver na mesma linha de base que o texto e tiver o tamanho de uma letra maiúscula (uma escolha altamente discutível):

Agora, quais ferramentas precisamos:

1. ajustar o tamanho da caixa de seleção
2. reconhecer o Chromium com sua caixa de seleção com margens pseudo-marginadas e definir estilos específicos
3. ajustar o alinhamento vertical da caixa de seleção / etiqueta

?

1. Em relação ao ajuste do tamanho caixa : há width, height, size, zoom, scale(eu perdi alguma coisa?). zoome scalenão permitem definir o tamanho absoluto; portanto, eles podem ajudar apenas no ajuste do tamanho do texto, não no tamanho entre navegadores (a menos que possamos escrever regras específicas do navegador). sizenão funciona com o Chrome (funcionou com o IE antigo? de qualquer maneira, não é tão interessante). widthe heighttrabalhar no Chrome e em outros navegadores, para que possamos definir um tamanho comum, mas, novamente, no Chrome, ele define o tamanho de toda a imagem, não a própria caixa de seleção. Nota: é o mínimo (largura, altura) que define o tamanho de uma caixa de seleção (se largura ≠ altura, a área fora do quadrado da caixa de seleção é adicionada à "pseudo-margem").

   Uma coisa lamentável é que as pseudo-margens na caixa de seleção do Chrome não estão definidas como zero para qualquer largura e altura, tanto quanto eu posso ver.

2. Receio que não exista um método somente CSS confiável hoje em dia.

3. Vamos considerar o alinhamento vertical. vertical-alignNão é possível obter resultados consistentes quando definido como middleou baselinepor causa da pseudo-margem do Chrome, a única opção real para obter o mesmo "sistema de coordenadas" para todos os navegadores é alinhar o rótulo e a entrada para top:

   

   (na imagem: alinhamento vertical: superior, inferior e inferior sem sombra de caixa)

Então, que resultado obtemos disso?

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

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

O snippet acima funciona com o Chrome (navegadores baseados no Chromium), mas outros navegadores exigem um tamanho menor da caixa de seleção. Parece ser impossível ajustar o tamanho e o alinhamento vertical de maneira a contornar a peculiaridade da imagem da caixa de seleção do Chromium. Minha sugestão final é: use caixas de seleção personalizadas - e você evitará frustrações :)

Agora que o flexbox é suportado em todos os navegadores modernos, algo assim parece uma abordagem mais fácil para mim.

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

Aqui está a demonstração completa da versão com prefixo:

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>

Eu acho que essa é a maneira mais fácil

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

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

Eu não gosto de posicionamento relativo porque faz com que o elemento seja renderizado acima de tudo em seu nível (ele pode ficar por cima de algo se você tiver um layout complexo).

Descobri que vertical-align: subas caixas de seleção parecem boas o suficiente alinhadas no Chrome, Firefox e Opera. Não é possível verificar o Safari, pois não tenho o MacOS e o IE10 está um pouco desligado, mas achei que era uma solução boa o suficiente para mim.

Outra solução pode ser tentar criar CSS específico para cada navegador e ajustá-lo com algum alinhamento vertical em% / pixels / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

Isto funciona bem para mim:

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>

A resposta escolhida com mais de 400 upvotes não funcionou para mim no Chrome 28 OSX, provavelmente porque não foi testada no OSX ou porque funcionou no que havia em 2008 quando a pergunta foi respondida.

Os tempos mudaram e novas soluções CSS3 agora são viáveis. Minha solução usa pseudoelementos para criar uma caixa de seleção personalizada . Portanto, as estipulações (prós ou contras, por mais que você as veja) são as seguintes:

• Funciona apenas em navegadores modernos (FF3.6 +, IE9 +, Chrome, Safari)
• Confia em uma caixa de seleção personalizada, que será renderizada exatamente da mesma forma em todos os navegadores / sistemas operacionais. Aqui, eu acabei de escolher algumas cores simples, mas você sempre pode adicionar gradientes lineares e assim dar mais estrondo.
• É voltado para um determinado tamanho de fonte / fonte, que, se alterado, você simplesmente altera o posicionamento e o tamanho da caixa de seleção para que ela pareça alinhada verticalmente. Se ajustado corretamente, o resultado final ainda deve ser quase o mesmo em todos os navegadores / sistemas operacionais.
• Sem propriedades de alinhamento vertical, sem flutuadores
• Deve usar a marcação fornecida no meu exemplo, ela não funcionará se estruturada como a pergunta, no entanto, o layout será essencialmente o mesmo. Se você quiser mudar as coisas, também precisará mover o CSS associado

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>

Esta solução oculta a caixa de seleção e adiciona e estiliza pseudoelementos ao rótulo para criar a caixa de seleção visível. Como o rótulo está vinculado à caixa de seleção oculta, o campo de entrada ainda será atualizado e o valor será enviado com o formulário.

E se você estiver interessado, aqui está minha opinião sobre os botões de opção: http://jsfiddle.net/DtKrV/2/

Espero que alguém ache isso útil!

Eu nunca tive um problema em fazer isso assim:

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

Se você usa o ASP.NET Web Forms , não precisa se preocupar com DIVs e outros elementos ou tamanhos fixos. Podemos alinhar o<asp:CheckBoxList> texto, definindo float:lefto tipo de entrada CheckboxList em CSS.

Verifique o seguinte código de exemplo:

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

Código .ASPX:

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

Se você estiver usando o Twitter Bootstrap, basta usar a checkboxclasse no <label>:

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

Com uma caixa de seleção do tipo de entrada enrolada dentro da etiqueta e flutuada para a esquerda, da seguinte forma:

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

isso funcionou para mim:

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

Verifique se a altura do é idêntica à altura da linha do (nível do bloco).

Codifique a altura e a largura da caixa de seleção, remova seu preenchimento e torne sua altura mais as margens verticais iguais à altura da linha da etiqueta. Se o texto do rótulo estiver embutido, faça flutuar a caixa de seleção. Firefox, Chrome e IE7 + todos processam o seguinte exemplo de forma idêntica: http://www.kornea.com/css-checkbox-align

Normalmente, deixo uma caixa de seleção sem rótulo e, em seguida, faço do "rótulo" um elemento separado. É uma dor, mas há tanta diferença entre navegadores entre como as caixas de seleção e seus rótulos são exibidos (como você notou) que é a única maneira de chegar perto de controlar como tudo fica.

Também acabo fazendo isso no desenvolvimento de winforms, pelo mesmo motivo. Penso que o problema fundamental com o controle da caixa de seleção é que são realmente dois controles diferentes: a caixa e o rótulo. Ao usar uma caixa de seleção, você fica a cargo dos implementadores do controle para decidir como esses dois elementos são exibidos próximos um do outro (e eles sempre entendem errado, onde errado = não é o que você deseja).

Eu realmente espero que alguém tenha uma resposta melhor para sua pergunta.

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>

O código acima colocará os itens da sua lista em três campos e apenas mudará as larguras para se adequarem.

A seguir, é apresentada uma consistência perfeita em pixels nos navegadores, mesmo no IE9:

A abordagem é bastante sensata, a ponto de ser óbvia:

1. Crie uma entrada e um rótulo.
2. Exiba-os como bloco, para que você possa flutuar como quiser.
3. Defina a altura e a altura da linha com o mesmo valor para garantir que elas centralizem e alinhem verticalmente.
4. Para medições em , para calcular a altura dos elementos, o navegador deve saber a altura da fonte desses elementos e não deve ser definido em medições em.

Isso resulta em uma regra geral aplicável globalmente:

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

Com tamanho de fonte adaptável por formulário, conjunto de campos ou elemento.

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

Testado no Chrome, Safari e Firefox mais recente no Mac, Windows, Iphone e Android. E IE9.

Esse método provavelmente é aplicável a todos os tipos de entrada que não são maiores que uma linha de texto. Aplique uma regra de tipo para se adequar.

Portanto, sei que isso já foi respondido várias vezes, mas sinto que tenho uma solução muito mais elegante do que as que já foram fornecidas. E não apenas uma solução elegante, mas duas soluções separadas para agradar sua fantasia. Com isso dito, tudo o que você precisa saber e ver está contido em 2 JS Fiddle's, com comentários.

A solução 1 baseia-se na "caixa de seleção" nativa do navegador fornecido, embora com um toque ... Está contida em uma div que é mais fácil de posicionar no navegador cruzado, com um estouro: oculto para cortar o excesso de uma caixa de seleção esticada de 1px (é assim que você não consegue ver as feias fronteiras do FF)

HTML simples: (siga o link para revisar o css com comentários, o bloco de código é para satisfazer o stackoverflow) http://jsfiddle.net/KQghJ/

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

A solução 2 usa o "Hack de alternância da caixa de seleção" para alternar o estado CSS de um DIV, que foi posicionado corretamente no navegador e configurado com um sprite simples para os estados desmarcados e verificados da caixa de seleção. Tudo o que é necessário é ajustar a posição de fundo com o referido Checkbox Toggle Hack. Esta, na minha opinião, é a solução mais elegante, pois você tem mais controle sobre suas caixas de seleção e rádios e pode garantir que eles tenham a mesma aparência no navegador.

HTML simples: (siga o link para revisar o CSS com comentários, o bloco de código é para satisfazer o StackOverflow) http://jsfiddle.net/Sx5M2/

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

Se alguém discordar desses métodos, deixe-me um comentário. Gostaria de ouvir alguns comentários sobre por que outras pessoas não se deparam com essas soluções ou, se o fazem, por que não vejo respostas aqui sobre elas? Se alguém vir um desses métodos falhar, seria bom ver isso também, mas eles foram testados nos navegadores mais recentes e dependem de métodos HTML / CSS bastante antigos e universais até onde eu vi.

Yay obrigado! Isso também tem me deixado louco para sempre.

No meu caso particular, isso funcionou para mim:

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

Estou usando o reset.css que pode explicar algumas das diferenças, mas isso parece funcionar bem para mim.

position: relative; tem alguns problemas no IE com z-index e animações como o slideUp / slideDown do 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');
    }
});

O estilo provavelmente precisa de ajustes, dependendo do tamanho da fonte usada no <label>

PS:
Eu uso o ie7js para fazer o css funcionar no IE6.

Use de forma simples vertical-align: sub, como pokrishka já sugeriu.

Violino

Código HTML:

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

Código CSS:

.checkboxes input {
    vertical-align: sub;
}

Solução simples:

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

Testado no Chrome, Firefox, IE9 +, Safari, iOS 9 ou superior