CSS Vertical alinear medio

Estoy tratando de alinear verticalmente un elemento SPAN en el medio de un elemento principal.CSS Vertical alinear medio

Esto es lo que estoy haciendo:

enter image description here

Estoy tratando de obtener tanto el nombre de usuario y contraseña etiquetas a estar alineada verticalmente (en el centro) con los cuadros de entrada.

Este es mi código HTML:

<div class="login_field_wrap"> 
    <span>Username</span> 
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username"> 
    <div class="clear"></div> 
</div>

Esto es lo que he intentado:

.clear { clear:both; } 
.login_field_wrap span { 
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; } 
.login_field_wrap input { 
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA; 
margin:0px; width:250px; }

alinear verticalmente un elemento de imagen en el interior de esta envoltura DIV funciona absolutamente bien, bien en Chrome de todos modos, simplemente no se alineará con mi SPAN!

Cualquier ayuda sería increíble.

Fuente

2012-03-28 TheCarver

Le agradezco a sus usuarios y en lugar de un '' genérico, utilice una etiqueta que esté explícitamente asociada con el control de formulario: ' Username'. – steveax

@steveax: siempre uso etiquetas para casillas de verificación y botones de opción debido a su tamaño más pequeño. El uso de una etiqueta obviamente aumenta el área seleccionable para que sea más fácil de usar, pero ¿es realmente necesario proporcionar una etiqueta para un cuadro de texto de 250px x 30px? Al navegar por Internet, nunca he hecho clic en la etiqueta de un cuadro de texto para centrarme en él. ¿Hay alguna otra razón por la que debería usar una etiqueta? – TheCarver

Aumentar el área de aciertos es solo un beneficio del uso de etiquetas, la otra razón importante es para los usuarios de lectores de pantallas. Al asociar explícitamente las etiquetas con los controles de formulario, el lector de pantalla leerá las etiquetas correctamente cuando se enfoque el control de formulario. – steveax

La alineación vertical a través de CSS puede ser complicada, y aunque CSS3 ofrece una serie de ventajas para ayudar con eso, el soporte de CSS3 es mediocre en el mercado actual de los navegadores.

Para lograr este efecto, configuré la propiedad line-height del elemento secundario igual a la altura de su elemento contenedor.

Por ejemplo, me gustaría utilizar el siguiente CSS:

.login_field_wrap { height:30px; /* or whatever is appropriate for your design */ 
.login_field_wrap span { height:30px; line-height:30px; } 
.login_field_wrap input { height:30px; line-height:30px; }

La única desventaja de usar line-height para alinear verticalmente algo es si el texto se desborda en una segunda línea, en cuyo caso su diseño será esencialmente romper.

Fuente

2012-03-28 23:13:53 Moses

Esto funciona muy bien, pero las personas deben saber que si el elemento principal cambia de tamaño de forma dinámica, la alineación se estropeará (o al menos se mantendrá dentro del predefinido 'line-height: 30px'). Si cambia, entonces debería considerar usar el método de visualización de tabla. De cualquier manera, no es necesario que haya una mejor manera de alinear verticalmente elementos en línea relevantes. Gran respuesta @Moses. –

Nunca he podido obtener vertical-align para trabajar en cualquier cosa que no sea <td> s.
Una solución alternativa que uso comúnmente sería definir una altura para .login_field_wrap, luego configure la propiedad line-height en su <span> para que sea igual a la altura .login_field_wrap.

Fuente

2012-03-28 23:12:32 Paul

Tricky, ¿eh? Logré obtener un elemento de imagen para alinear verticalmente (en el medio) dentro de un DIV de envoltura pero simplemente no lo hará con el lapso de tiempo. – TheCarver

-3

Creo text-align: center; debería trabajar en elementos también. Si no me equivoco, eso generalmente funciona incluso si no está en el texto.

Fuente

2012-03-28 23:32:16 corvid

La alineación de texto establecida en el centro alinea horizontalmente el texto y algunos elementos. Estoy buscando la alineación vertical establecida en el centro como dice el título de la pregunta. Gracias por hacer el esfuerzo, independientemente. – TheCarver

Basta con retirar la propiedad float de su span class y la pusieron a display:inline-block y la propiedad vertical-align:middle va a funcionar, así:

.login_field_wrap span { 
    color: #333333; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    text-align: left; 
    vertical-align: middle; 
}

Editar: limpió su código un poco, aquí es una demostración de que debe trabajar en navegadores http://jsfiddle.net/kUe3Y/

Fuente

2012-03-28 23:46:44

Esto funcionó para mi sitch también. Gracias. –

He encontrado la manera más fácil de hacer esto es establecer la propiedad de presentación contenedor primario a table y la propiedad de visualización secundario a table-cell

#parent{ 
    display:table; 
} 

#child{ 
    display:table-cell; 
    vertical-align:middle; 
}

yo era capaz de conseguir esto para alinear verticalmente un elemento de anclaje dentro de un div.

Lo puse en los términos de su pregunta en este jsFiddle.

Fuente

2014-01-02 15:22:41

Respuesta

Cuestiones relacionadas