Alineamiento vertical

19.04.19

Hay varias formas de alineación vertical. En diferentes situaciones, diferentes formas son adecuadas. Consideremos algunos de ellos.

1. Con display: flex

Es la forma más cómoda y moderna..

.parent{
	display: flex;
	align-items: center;	
}

2. Con table-cell

En las celdas de la tabla, vertical-align se aplica a cualquier contenido.

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

3. Con position: absolute и top

Es adecuado para casos con una altura conocida del bloque hijo. El principio de operación se encuentra en la parte top: 50% (la mitad del bloqueo principal) y una sangría negativa desde arriba hacia la mitad del bloqueo secundario. De la misma manera, puede centrar el bloque horizontalmente, utilizando solo left: 50%margin negativo a la izquierda.

.parent{
    position: relative;
}
.child{
    position: absolute;
    height: 50px;
    top: 50%;
    margin-top: -25px;
}

4. Con position: absolute и margin

Hay otra forma de centrar usando posicionamiento absoluto. La altura del bloque hijo debe ser fija. También puede centrar la unidad secundaria horizontalmente. Entonces el ancho también debe ser fijo.

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;
    height: 30px; /*свое значение*/
    width: 200px; /*свое значение*/
}

5. Alinear una linea

La altura del bloque y la altura de la fila deben ser iguales.

height: 30px;
line-height: 30px;
display: inline-block;
text-align: center;
text-transform: uppercase;
blog comments powered by Disqus