horizontally - vertical align middle css

CSS: ¿Cómo alinear verticalmente una "etiqueta" y "entrada" dentro de un "div"?

Question

Considera el siguiente código :

HTML:

<div>
<label for=''name''>Name:</label>
<input type=''text'' id=''name'' />
</div>

CSS:

div {
height: 50px;
border: 1px solid blue;
}

¿Cuál sería el método más fácil para poner la label y la input en el medio del div (verticalmente)?

Answer 1

Envuelva la etiqueta y la entrada en otro div con una altura definida. Esto puede no funcionar en versiones de IE inferiores a 8.

position:absolute;
top:0; bottom:0; left:0; right:0;
margin:auto;

Answer 2

Esto funciona en varios navegadores, proporciona más accesibilidad y viene con menos marcado. abandonar el div. Envuelva la etiqueta

label{
display: block;
height: 35px;
line-height: 35px;
border: 1px solid #000;
}
input{margin-top:15px; height:20px}
<label for="name">Name: <input type="text" id="name" /></label>

Answer 3

Puede usar display: table-cell propiedad de display: table-cell como en el siguiente código:

div {
height: 100%;
display: table-cell;
vertical-align: middle;
}

Answer 4

Soy consciente de que esta pregunta fue hecha hace más de dos años, pero para cualquier espectador reciente, aquí hay una solución alternativa, que tiene algunas ventajas sobre la solución de Marc-François:

div {
height: 50px;
border: 1px solid blue;
line-height: 50px;
}

Aquí simplemente agregamos una line-height igual a la altura del div. La ventaja es que ahora puede cambiar la propiedad de visualización del div como mejor le parezca, por ejemplo, inline-block en inline-block , y sus contenidos permanecerán centrados verticalmente. La solución aceptada requiere que trate el div como una celda de tabla. Esto debería funcionar perfectamente, entre navegadores.

La única otra ventaja es que es solo una regla CSS más en lugar de dos :)

¡Aclamaciones!

Answer 5

Use padding en el div ( arriba y abajo ) y vertical-align:middle en el vertical-align:middle en la label y la input .

ejemplo en http://jsfiddle.net/VLFeV/1/

Answer 6

un enfoque más moderno sería usar css flex-box.

div {
height: 50px;
background: grey;
display: flex;
align-items: center
}

<div>
<label for=''name''>Name:</label>
<input type=''text'' id=''name'' />
</div>

un ejemplo más complejo ... si tiene elementos multibles en el flujo flexible, puede usar Align-Self para alinear elementos individuales de manera diferente a la alineación especificada ...

div {
display: flex;
align-items: center
}
* {
margin: 10px
}
label {
align-self: flex-start
}

<div>
<img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
<label>Text</label>
<input placholder="Text" type="text" />
</div>

también es súper fácil de centrar horizontal y verticalmente:

div {
position:absolute;
top:0;left:0;right:0;bottom:0;
background: grey;
display: flex;
align-items: center;
justify-content:center
}

<div>
<label for=''name''>Name:</label>
<input type=''text'' id=''name'' />
</div>

Answer 7

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}

<div>
<label for=''name''>Name:</label>
<input type=''text'' id=''name'' />
</div>

Las ventajas de este método es que puede cambiar la altura del div , cambiar la altura del campo de texto y cambiar el tamaño de la fuente, y todo permanecerá siempre en el medio.

http://jsfiddle.net/53ALd/6/