Projetos recentes envolvem a produção de diversos formulários, principalmente caixas de seleção e rádios. No entanto, durante o processo de desenvolvimento do front-end, descobriu-se que as caixas de seleção únicas (múltiplas) e o texto do prompt atrás delas não podem ser alinhados sem nenhuma configuração, e há uma grande diferença entre o Firefox e o IE. Mesmo que vertical-align:middle esteja definido, ele ainda não está perfeitamente alinhado. Conforme mostrado abaixo:
Então verifiquei alguns sites online e descobri que esse problema é comum, conforme mostrado abaixo (FF3.5):
Em muitas páginas de sites que envolvem formulários, existe o problema de os elementos do formulário e o texto do prompt não poderem ser alinhados. Então decidi estudar esse assunto. Em primeiro lugar, procurei o artigo do sênior wheatlee " Todo mundo tem opiniões diferentes sobre o alinhamento vertical ". Em seu artigo, wheatlee mencionou os seguintes pontos-chave sobre centralização vertical:
1. Quando vertical-align:middle é usado, o centro do elemento é alinhado com o centro dos elementos circundantes.
2. A definição de "centro" aqui é: a imagem tem, obviamente, metade da altura e o texto deve ser movido para cima 0,5ex com base na linha de base, que é o centro exato da letra minúscula "x". No entanto, muitos navegadores geralmente definem a unidade ex como 0,5em, de modo que não é necessariamente o centro exato de x (se você não entende termos como linha de base, leia primeiro o artigo de wheatlee)
Seguindo essa ideia e comparando os problemas que encontrei, a primeira coisa que pensei foi verificar se o navegador utiliza as mesmas regras para renderização de "checkboxes" e imagens (se trata o checkbox como uma imagem quadrada). Então escrevi o seguinte código:
<estilo>
corpo{tamanho da fonte:12px;}
</estilo>
<input style="vertical-align:middle;" nome="teste" type="caixa de seleção">
<img style="vertical-align:middle;" src="testpic.gif" />
texto de teste
O testpic.gif no código é uma imagem preta exatamente do mesmo tamanho da caixa de seleção. A exibição em FF3.5 é a seguinte:
