6 trucos CSS para alinear contenido verticalmente
Hablemos de alineación vertical en CSS, o para ser más precisos, cómo no es factible. CSS aún no ha proporcionado una forma oficial de centrar el contenido verticalmente dentro de su contenedor. Es un problema que probablemente ha frustrado a los desarrolladores web en todas partes. Pero no temas, en este post, vamos a hacerte algunos trucos que pueden ayudarte. imitar el efecto.
Sin embargo, estos trucos pueden tener limitaciones y es posible que tenga que usa más de un truco para completar la ilusion Si conoces algún otro truco, háznoslo saber en los comentarios..
1. Utilice Posicionamiento Absoluto
El primer truco que vamos a ver aquí usa el Primero estableceremos la posición del elemento contenedor en relativa, luego estableceremos la posición del elemento secundario en Para alinearlo verticalmente, mueva la posición del elemento secundario desde la parte superior, por la mitad de la altura del contenedor, y levántelo por la mitad del ancho del elemento secundario. Aquí está la salida: Este truco es perfecto cuando solo hay un elemento secundario, de lo contrario CSS3 Transform ha facilitado poner contenido en el centro. CSS3 Transform, a diferencia de la Suponiendo que tenemos la misma estructura HTML que el método anterior: un elemento primario, un elemento secundario - Sin embargo, tenga en cuenta que las transformaciones de CSS3 no funcionarán en Internet Explorer 8 y versiones anteriores. Es posible que desee utilizar cualquiera de los otros métodos aquí como alternativa.. También podemos usar Este truco es adecuado para cuando no configura el contenedor en un ancho fijo, solo establezca el ancho en Si solo tiene una línea de contenido textual dentro de un contenedor, puede alinear el texto verticalmente usando la Recuerda que este truco solo funciona con una sola línea de texto. Si el contenido se divide en dos o más líneas, el espacio entre cada línea será como lo especificamos en el Personalmente, usar CSS Table es mi truco favorito para aplicar la alineación vertical. Funciona en navegadores antiguos como Internet Explorer 8. Este método se realiza configurando la visualización del elemento contenedor en El último método para el centrado vertical es mediante Flexbox. Flexbox es un nuevo módulo en CSS3. Ofrece un método más directo para alinear contenido. Para centrar el contenido verticalmente en el cuadro flexible, simplemente agregue Tenga en cuenta que algunos navegadores de Flexbox solo admiten la función de parciales del módulo Flexbox, como Internet Explorer 10, Safari, 6 y Chrome 27 y versiones posteriores. Por lo tanto, similar al truco con CSS3 Transform, asegúrese de que el efecto caiga bien en estos navegadores.posición propiedad. Tienes dos absoluto. Esto nos permite colocarlo libremente sobre el contenedor.. absoluto La posición afectará al otro elemento dentro del mismo contenedor..2. Usa CSS3 Transform
posición propiedad, no afectará la posición de otros elementos dentro del mismo contenedor.50% Desde la parte superior y utilizando la transformación CSS da una traducción de -50%. Y ahí lo tienes.3. Use relleno
relleno Para crear una ilusión de alineación vertical. Para hacerlo, simplemente configure el relleno superior e inferior por igual, de la siguiente manera:auto.4. Usa la altura de la línea
altura de la línea propiedad. Selecciona el altura de la línea valor de aproximadamente el mismo que la altura del contenedor, y verá la siguiente salida.altura de la línea, dándonos demasiado espacio en blanco.5. Usa la tabla CSS
mesa, mientras que el elemento hijo debe mostrarse como mesa-celda luego usa el alineación vertical propiedad para centrar el texto verticalmente.6. Utilice Flexbox
alinear-elementos: centro; como sigue, y eso es todo.
