Pares de casilla de verificación/alineación vertical

Reviso las publicaciones sobre este tema en Stack Overflow, pero nada realmente funciona para mí. Tengo el siguiente código CSS a par casilla/etiqueta verticalmente align:Pares de casilla de verificación/alineación vertical

body { 
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif; 
    font-size: 11px; 
    margin: 0; 
    padding: 0; 
} 

fieldset { 
    line-height: 100%; 
} 

label { 
    display: inline-block; 
    vertical-align: baseline; 
}

El código HTML completa es here.

Los pares de casillas de verificación/etiquetas se centran verticalmente correctamente en Safari (5.0.3) y Firefox (3.6.13) en Mac OS X. Las casillas de verificación de Chrome (Mac OS X) se representan levemente en la parte superior. En Windows OS, las casillas de verificación y las etiquetas asociadas están alineadas en la parte inferior (consistentemente en diferentes navegadores: Firefox, Safari, Chrome e Internet Explorer 8).

¿Podría alguien explicarme por qué ocurren estas diferencias entre navegadores/sistema operativo (y también cómo evitarlas)?

actualización

El truco para alinear verticalmente casilla con la etiqueta en Chrome en Mac es el siguiente:

input[type=checkbox] { 
    position: relative; 
    top: 1px; 
}

ahora tiene que poner en práctica sistemas operativos y navegadores condicionales específicos ...

Fuente

2011-01-22 Andrej

-3

No tengo idea de por qué los navegadores hacen cosas diferentes, siempre lo hacen. En cuanto a esto, ¿has intentado display:table-cell;?

Fuente

2011-01-22 08:37:59 Elq

tratar de darle a las casillas de verificación acolchado superior que disminuirá su altura un poco para centrarlos. – Amit

+11

Esto no ayuda a nadie sin una referencia específica al código original y la pregunta. Añadiendo 'display: table-cell' a qué?!?! –

Tal vez los márgenes/relleno predeterminados en el <input> están estropeando las cosas?

Fuente

2011-01-23 22:12:04 Neil

otra solución:

.checkbox{ 
vertical-align:-3px; 
}

nota: es muy sencillo. Pero no siempre funciona bien si el tamaño de fuente de la etiqueta es demasiado grande.

Fuente

2011-04-27 08:57:19 Fmy

Para que el ajuste sea sensible al tamaño de letra, puede usar 'em' en lugar de' px', p. Ej. 'vertical-align: -0.1em'. – George

.flcheck-wrapper 
{ overflow:hidden; 
    margin:5px 0; 
} 

.flcheck-wrapper p 
{ font-size:12px; 
    display:inline; 
    float:left; 
    line-height:20px; 
    margin:0 0 0 10px; 
} 

.flcheck-wrapper input[type="checkbox"], 
.flcheck-wrapper input[type="radio"] 
{ display:inline; 
    float:left; 
    margin:0 !imortant; 
    line-height:20px; 
    height:20px; 
} 

<div class="flcheck-wrapper">  
    <input type="radio" name="foo" value="true" checked="checked" /> 
    <p>Some kind of text</p> 
</div> 
<div class="flcheck-wrapper">  
    <input type="radio" name="foo" value="false" /> 
    <p>Some kind of text</p> 
</div>

Fuente

2012-03-01 10:53:12

Es así como finalmente lo hice:

label input[type=checkbox] { 
    margin-top: 5px; 
}

Fuente

2013-02-08 08:45:01 llundin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<link rel="shortcut icon" href="../images/favicon.ico" /> 
<style> 
.GlobalEntityComboBox { 
    font-family: Verdana; 
    font-size: 11px; 
    padding: 0px; 
    margin: 0px; 
    background-color: lightgrey; 
    border: 1px solid grey; 
    width: 190px; 
} 
.GlobalEntityComboBox li { 
    list-style-type: none; 
    line-height: 24px; 
    padding-left: 4px; 
    padding-right: 4px; 
    margin-top: 1px; 
    margin-bottom: 1px; 
} 
.GlobalEntityComboBox li.checked { 
    background-color: lightgreen; 
    border-top: 1px solid green; 
    border-bottom: 1px solid green; 
} 
.GlobalEntityComboBox input { 
    margin: 0px; 
    padding: 0px; 
    margin-right: 4px; 
    vertical-align: middle; 
} 
.GlobalEntityComboBox span { 
    vertical-align: middle; 
} 
</style> 
</head> 
<body> 
<ul class="GlobalEntityComboBox"> 
    <li class="checked"><input type="checkbox" checked/><span>All Servers</span></li> 
    <li class="checked"><input type="checkbox" checked/><span>Server 1</span></li> 
    <li class="checked"><input type="checkbox" checked/><span>Server 2</span></li> 
    <li><input type="checkbox"/><span>Server 3</span></li> 
</ul> 
</body> 
</html>

Fuente

2013-03-05 13:09:22 Anik

Pares de casilla de verificación/alineación vertical

Respuesta

Cuestiones relacionadas