Todos los métodos de alineación vertical en CSS. Alinear al centro DIV

Este tiposalta elementos prohibidos.

Ahora pasemos al atributo alinear. Establece la alineación horizontal de los objetos y se ajusta después de la declaración de la etiqueta. Por lo general, se puede usar para alinear el contenido a la izquierda ( izquierda), en el lado derecho ( bien), centrado ( centro) y el ancho del texto ( justificar).

A continuación daré un ejemplo en el que colocaré la imagen y el párrafo en el centro.

Este contenido estará centrado.

Tenga en cuenta que para la imagen, el atributo que estamos analizando tiene valores ligeramente diferentes.

En el ejemplo que usé alinear = "medio". Gracias a esto, la imagen se alinea para que la oración se ubique exactamente en el medio de la imagen.

Herramientas de centrado CSS

Las propiedades CSS diseñadas para alinear bloques, texto y contenido gráfico se usan con mucha más frecuencia. Esto se debe principalmente a la conveniencia y flexibilidad de implementar estilos.

Entonces, comencemos con la primera propiedad del centrado de texto: esto es texto-alinear.

Funciona igual que alinear en . Puedes elegir una de las palabras clave lista general o heredar las características de un antepasado ( heredar).

Quiero señalar que en css3 puede establecer 2 parámetros más: comenzar– dependiendo de las reglas de escritura del texto (de derecha a izquierda o viceversa), establece la alineación a la izquierda o a la derecha (similar al trabajo de izquierda o derecha) y fin- opuesto al inicio (al escribir texto de izquierda a derecha, actúa como derecho, al escribir de derecha a izquierda - izquierda).

Déjame contarte un pequeño truco. Al elegir un valor justificar la última línea puede quedar fea desde abajo. Para colocarlo, por ejemplo, en el centro, puedes usar la propiedad texto-alinear-último.

Para alinear el contenido del sitio o las celdas de la tabla verticalmente, use la propiedad alineación vertical. A continuación he descrito los principales palabras clave elemento.

Sangría

Y finalmente, hemos llegado a la sangría en el párrafo. El lenguaje css usa una propiedad especial llamada guion de texto.

Con él, puede hacer una línea roja y una repisa (debe especificar un valor negativo).

Felicito a quienes probaron cada ejemplo en la práctica. Envía enlaces a mi blog a tus amigos y no olvides suscribirte. ¡Buena suerte! ¡Adiós!

Atentamente, Roman Chueshov

Leer: 675 veces

Vlad Merzhevich

Debido al hecho de que los contenidos de las celdas de la tabla pueden alinearse simultáneamente horizontal y verticalmente, se amplían las posibilidades de controlar la posición de los elementos entre sí. Las tablas le permiten establecer la alineación de imágenes, texto, campos de formulario y otros elementos entre sí y con la página web en su conjunto. En general, la alineación es principalmente necesaria para establecer una conexión visual entre diferentes elementos, así como para agruparlos.

Centrado vertical

Una forma de mostrar al visitante el enfoque y el título del sitio es usar una página de inicio. Esta es la primera página, en la que, por regla general, hay una introducción flash o una imagen que expresa la idea principal del sitio. La imagen también es un enlace a otras secciones del sitio. Es necesario colocar esta imagen en el centro de la ventana del navegador, independientemente de la resolución del monitor. Para ello, puede utilizar una tabla con un ancho y una altura iguales al 100 % (ejemplo 1).

Ejemplo 1: Centrar una imagen

EN este ejemplo la alineación horizontal se establece usando la etiqueta align="center" , y el contenido de la celda no necesita estar centrado verticalmente, ya que esta posición se establece de manera predeterminada.

Para configurar la altura de la mesa al 100%, quite, el código ya no es válido.

El uso del ancho y el alto para toda el área disponible de la página web garantiza que los contenidos de la tabla se alinearán estrictamente en el centro de la ventana del navegador, independientemente de su tamaño.

Alineación horizontal

Combinando los atributos align (alineación horizontal) y valign (alineación vertical) de la etiqueta , está permitido establecer varios tipos de posiciones de elementos entre sí. En la fig. 1 muestra cómo alinear elementos horizontalmente.

Veamos algunos ejemplos de alineación de texto según la figura a continuación.

Alineación superior

Para especificar la alineación del contenido de la celda por borde superior, por etiqueta se requiere establecer el atributo valign con el valor superior (ejemplo 2).

Ejemplo 2: Uso de valign

En este ejemplo, las características de las celdas se controlan mediante parámetros de etiquetas. , pero también es más conveniente cambiar los estilos. En particular, la alineación de celdas se especifica mediante las propiedades vertical-align y text-align (ejemplo 3).

Ejemplo 3: aplicar estilos para la alineación

Para acortar el código, este ejemplo utiliza la agrupación de selectores porque las propiedades de relleno y alineación vertical se aplican a dos celdas al mismo tiempo.

La alineación inferior se realiza de la misma manera, pero se usa bottom en lugar de top .

Alineación central

De forma predeterminada, el contenido de una celda se alinea con el centro de su vertical, por lo que en caso diferentes alturas las columnas deben establecerse en la alineación superior. A veces, aún debe dejar el método de alineación original, por ejemplo, al colocar fórmulas, como se muestra en la Fig. 2.

En este caso, la fórmula se encuentra estrictamente en el centro de la ventana del navegador y su número está en el borde derecho. Para tal disposición de elementos, necesita una tabla con tres celdas. Las celdas exteriores deben tener el mismo tamaño, en la celda del medio la alineación se realiza en el centro y en la celda derecha, en el borde derecho (ejemplo 4). Este número de celdas es necesario para garantizar que la fórmula esté centrada.

Ejemplo 4: Alineación de fórmulas

(18.6)

En este ejemplo, la primera celda de la tabla se deja vacía, solo sirve para crear una sangría que, por cierto, también se puede establecer mediante estilos.

Alineación de elementos de formulario

Las tablas son útiles para posicionar campos de formulario, especialmente cuando se intercalan con texto. Una de las opciones de diseño del formulario, que está diseñado para ingresar un comentario, se muestra en la Fig. 3.

Para que el texto cerca de los campos del formulario se alinee a la derecha y los elementos del formulario se alineen a la izquierda, necesita una tabla con un borde invisible y dos columnas. La columna de la izquierda contendrá el texto en sí, y la columna de la derecha contendrá campos de texto (ejemplo 5).

Ejemplo 5 Alineación de campos de formulario

En este ejemplo, se agregó el atributo align="right" para las celdas que requieren alineación a la derecha. Para que la inscripción "Comentario" se encuentre en límite superior texto de varias líneas, la celda correspondiente se establece en la parte superior alineada mediante el atributo valign.

Creo que muchos de los que habéis hecho trabajos de maquetación os habéis encontrado con la necesidad de alinear elementos de forma vertical y sabéis qué dificultades surgen a la hora de alinear un elemento al centro.

Sí, para la alineación vertical en CSS hay una propiedad especial de alineación vertical con muchos valores. Sin embargo, en la práctica no funciona como se esperaba. Tratemos de resolver esto.

Comparemos los siguientes enfoques. Alineación con:

• mesas,
• sangría,
• altura de la línea ,
• extensión,
• margen negativo,
• transformar,
• pseudo elemento
• caja flexible.

Hay dos elementos div, uno anidado dentro del otro. Démosles las clases apropiadas: exterior e interior.

Para empezar, considere el caso cuando los tamaños del bloque exterior e interior conocido. Agreguemos display: inline-block al elemento interno y text-align: center y vertical-align: middle al elemento externo.

Recuerde que la alineación solo se aplica a los elementos que tienen el modo de visualización en línea o en bloque en línea.

Configuremos los tamaños de los bloques, así como los colores de fondo para ver sus bordes.

Exterior ( ancho: 200 px; alto: 200 px; alineación de texto: centro; alineación vertical: medio; color de fondo: #ffc; ) .inner ( pantalla: bloque en línea; ancho: 100 px; altura: 100 px; color de fondo : #fcc; )
Después de aplicar los estilos, veremos que el bloque interior está alineado horizontalmente, pero no verticalmente:
http://jsfiddle.net/c1bgfffq/

¿Por qué sucedió? El hecho es que la propiedad de alineación vertical afecta la alineación el elemento en sí, no su contenido(excepto cuando se aplica a las celdas de la tabla). Por lo tanto, aplicar esta propiedad al elemento exterior no hizo nada. Además, aplicar esta propiedad al elemento interno tampoco hará nada, ya que los bloques en línea están alineados verticalmente con los bloques vecinos, y en nuestro caso tenemos un bloque en línea.

Existen varias técnicas para solucionar este problema. Echemos un vistazo más de cerca a cada uno de ellos a continuación.

Alineación con una mesa

Menos obvio esta decisión- desde el punto de vista de la semántica, es incorrecto usar tablas para la alineación. La segunda desventaja es que para crear una tabla, debe agregar un elemento más alrededor del bloque exterior.

El primer menos se puede eliminar parcialmente reemplazando las etiquetas table y td con div y configurando el modo de visualización de la tabla en CSS.

Alineación con relleno

Exterior (altura: 200px; ) .interior (altura: 100px; margen: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

La desventaja de la solución es que es aplicable solo en un número limitado de casos cuando se conocen las alturas de ambos bloques.

Alineación con altura de línea

Exterior (altura: 200 px; altura de línea: 200 px;) .inner (espacio en blanco: nowrap; desbordamiento: oculto;)
http://jsfiddle.net/c1bgfffq/12/

Esta técnica también se puede usar para alinear texto de líneas múltiples si anula el valor de altura de línea para el bloque interno y agrega las reglas display: inline-block y vertical-align: middle .

Exterior ( altura: 200 px; altura de línea: 200 px; ) .inner ( altura de línea: normal; pantalla: bloque en línea; alineación vertical: medio; )
http://jsfiddle.net/c1bgfffq/15/

La desventaja de este método es que se debe conocer la altura del bloque exterior.

Estirar alineación

Para esto necesitas:

1. establecer el posicionamiento relativo al bloque exterior y el posicionamiento absoluto al bloque interior;
2. agregue las reglas top: 0 y bottom: 0 al bloque interior, como resultado de lo cual se extenderá a toda la altura del bloque exterior;
3. establezca el valor en automático para el relleno vertical del bloque interior.

La esencia de esta técnica es que establecer una altura para un bloque estirado y absolutamente posicionado hace que el navegador calcule el relleno vertical en proporciones iguales si su valor se establece en automático.

Alineación con margen superior negativo

Debe establecer el bloque exterior en posicionamiento relativo y el bloque interior en posicionamiento absoluto. Luego debe mover el cuadro interior hacia abajo la mitad de la altura de la parte superior del cuadro exterior: 50% y moverlo hacia arriba la mitad de su propia altura margen superior: -H interior / 2.

Exterior (posición: relativa;) .interior (altura: 100px; posición: absoluta; superior: 50%; margen superior: -50px;)
http://jsfiddle.net/c1bgfffq/13/

La desventaja de este método es que se debe conocer la altura de la unidad interior.

Alineación con transformación

Exterior ( posición: relativa; ) .inner ( posición: absoluta; superior: 50 %; transformar: traducir Y (-50 %); )
http://jsfiddle.net/c1bgfffq/9/

¿Por qué en el método anterior era imposible establecer el valor en porcentaje? Dado que los valores porcentuales de la propiedad margin son relativos al elemento principal, un valor del 50 % equivaldría a la mitad de la altura del cuadro exterior, y necesitaríamos elevar el cuadro interior a la mitad de su propia altura. Esto es exactamente para lo que sirve la propiedad transform.

La desventaja de este método es que no se puede aplicar si el bloque interno tiene posicionamiento absoluto.

Alineación con Flexbox

El bloque exterior debe configurarse para mostrar: flex , y el bloque interno debe configurarse para margin: auto . ¡Y es todo! Hermoso, ¿no?

Exterior (pantalla: flexible; ancho: 200 px; alto: 200 px; ) .inner ( ancho: 100 px; margen: automático; )
http://jsfiddle.net/c1bgfffq/14/

La desventaja de este método es que Flexbox solo es compatible con navegadores modernos.

¿Qué camino elegir?

• Para la alineación vertical del texto, es mejor usar el relleno vertical o la propiedad line-height.
• Para elementos absolutamente posicionados con una altura conocida (como iconos), un enfoque de margen superior negativo es ideal.
• Para más casos dificiles, cuando se desconoce la altura del bloque, se debe usar un pseudo-elemento o la propiedad transform.
• Bueno, si tiene la suerte de no tener que admitir versiones anteriores de IE, entonces, por supuesto, Flexbox es mejor.

Alineación de texto verticalmente en CSS- un trabajo muy difícil. He visto a suficientes personas que luchan con esto y sigo encontrando errores "críticos" cuando se trata de un diseño receptivo real.

Pero no temas: si ya estás luchando con la alineación vertical de CSS, has venido al lugar correcto.

Hablemos de la propiedad de alineación vertical CSS

Cuando comencé a trabajar en el campo del desarrollo web, sufrí un poco con esta propiedad. Pensé que debería funcionar como una propiedad clásica” texto alineado". Ah, si tan solo fuera tan fácil...

Propiedad de alineación vertical CSS funciona bien con tablas pero no con divs u otros elementos. Cuando lo usa en un div, alinea el elemento con otros bloques, pero no su contenido. En este caso, la propiedad solo funciona con display: inline-block; .

Ver ejemplo

¡Queremos centrar el contenido, no el div en sí mismo!

Tienes dos opciones. Si solo tiene divs con texto, puede usar la propiedad line-height. Esto significa que necesita saber la altura del elemento, pero no puede configurarlo. De esta forma tu texto siempre estará en el centro.

La verdad de este enfoque Alineación vertical CSS hay una desventaja. Si el texto es de varias líneas, la altura de la línea se multiplicará por el número de líneas. Lo más probable es que, en este caso, termines con una página terriblemente diseñada.

Echale un vistazo a éste ejemplo

Si el contenido que desea centrar tiene más de una línea, entonces es mejor usar divs de tabla. También puede usar tablas, pero esto no es semánticamente correcto. Si necesita descansos para fines de respuesta, es mejor usar elementos div.

Para que esto funcione, debe haber un contenedor principal con display: table , y dentro de él, el número deseado de columnas que desea centrar con display: table-cell y vertical-align: middle .

Ver ejemplo

¿Por qué funciona esto con el diseño de la tabla pero no con los elementos div? Porque las filas de la tabla tienen la misma altura. Cuando el contenido de una celda de tabla no utiliza todo el espacio de altura disponible, el navegador agrega automáticamente relleno vertical para centrar el contenido.

propiedad de posición

Comencemos con los conceptos básicos de la alineación vertical de CSS div:

• posición: estática es la predeterminada. El elemento se representa de acuerdo con el orden HTML;
• posición: absoluta - se utiliza para determinar la posición exacta de un elemento. Esta posición siempre está asociada con el elemento padre más cercano relativamente posicionado (no estático). Si no determina la posición exacta de un elemento, perderá el control sobre él. Se renderizará aleatoriamente, ignorando por completo el flujo del documento. De forma predeterminada, el elemento se muestra en la esquina superior izquierda;
• posición: relativa: se utiliza para colocar un elemento en relación con su posición normal (estática). Este valor conserva el orden de flujo del documento;
• posición: fijo: se usa para colocar el elemento en relación con la ventana del navegador para que siempre aparezca en la ventana gráfica.

Nota: algunas propiedades ( superior e índice z) solo funcionan si el elemento está configurado en posición (no estático).

¡Vamos a ir al grano!

¿Quieres implementar Alineación central vertical CSS? Primero cree un elemento con posición y dimensiones relativas. Por ejemplo: 100% en ancho y alto.

El segundo paso puede ser diferente según los navegadores de destino, pero se puede usar una de dos opciones:

• Propiedad antigua: necesita saber el tamaño exacto de la ventana para eliminar la mitad del ancho y la mitad de la altura. Ver ejemplo;
• Nueva propiedad CSS3: Puede agregar una propiedad de transformación con un valor de traducción del 50 % y el bloque siempre estará en el centro. Ver ejemplo.

Básicamente, si desea centrar el contenido, nunca use la parte superior: 40% o izquierda: 300px. Esto funciona muy bien en las pantallas de prueba, pero no se centra.

Recuerde la posición: ¿fijo? Puede hacer lo mismo con él que con la posición absoluta, pero no necesita una posición relativa para el elemento principal; siempre se ubicará en relación con la ventana del navegador.

¿Has oído hablar de la especificación flexbox?

Puedes usar flexbox. Es mucho mejor que cualquier otra opción. centrar el texto alinear CSS verticalmente. Con flexbox, la gestión de elementos es un juego de niños. El problema es que algunos navegadores como IE9 e inferiores deben eliminarse. Aquí hay un ejemplo de cómo centrar verticalmente un bloque:

Ver ejemplo

Usando el diseño de caja flexible, puede centrar varias cajas.

Si aplica lo que ha aprendido de estos ejemplos, podrá dominar CSS alinear bloque verticalmente lo antes posible.

Enlaces y lecturas adicionales

Aprendizaje de marcado CSS

Rana FlexBox

caja de arena flexible

Traducción del artículo “ Alineación vertical CSS para todos (dummies incluidos)” fue preparado por un equipo de proyecto amistoso.

Del autor: Les doy la bienvenida de nuevo a nuestras páginas de blog. En el artículo de hoy, me gustaría hablar sobre varias técnicas de alineación que se pueden aplicar tanto a los bloques como a su contenido. En particular, cómo alinear bloques en css, así como la alineación de texto.

Alinear bloques al centro

Es fácil centrar un bloque en css. Esta es la técnica más famosa para muchos, pero me gustaría hablar de ella ahora mismo, antes que nada. Esto está destinado a estar centrado horizontalmente en relación con el elemento principal. ¿Cómo se lleva a cabo? Digamos que tenemos un contenedor y nuestro sujeto de prueba está en él:

Supongamos que este es el encabezado del sitio. No abarca todo el ancho de la ventana y necesitamos centrarla. Escribimos así:

Necesitamos especificar el ancho exacto o máximo, y luego escribir la propiedad clave - margen: 0 auto. Establece los márgenes para nuestro encabezado, el primer valor determina los márgenes desde la parte superior e inferior, y el segundo, a la derecha y a la izquierda. El valor automático le indica al navegador que calcule automáticamente el relleno en ambos lados para que el elemento esté exactamente centrado en el elemento principal. ¡Cómodo!

Alineación del texto

Este también es un truco muy simple. Para alinear todos los elementos en línea, puede usar la propiedad text-align y sus valores: izquierda, derecha, centro. Este último centra el texto, que es lo que queremos. Incluso una imagen se puede alinear de la misma manera, porque también es un elemento en línea por defecto.

Alinear texto verticalmente

Pero esto ya es más difícil. De forma predeterminada, no existe una propiedad tan simple y conocida que centre fácilmente el texto en un contenedor de bloques verticalmente. Sin embargo, hay varios trucos que los diseñadores de diseño han ideado a lo largo de los años.

Establezca la altura del bloque usando el relleno. La forma es no establecer una altura explícita con altura, sino crearla artificialmente con rellenos superior e inferior, que deberían ser iguales. Vamos a crear cualquier bloque y escribirle las siguientes propiedades:

div(fondo: #ccc; relleno: 30px 0; )

El fondo es solo para ver visualmente los bordes y el relleno. Ahora, la altura del bloque se compone de estas dos sangrías y la línea misma, y ​​todo se ve así:

Defina una altura de línea para el bloque. creo que es mas La direccion correcta si necesita alinear una línea de texto. Con él, puede registrar la altura normal usando la propiedad de altura. Después de eso, también necesita establecer la altura de la línea, igual que la altura del bloque como un todo.

div (altura: 60 px; altura de línea: 60 px;)

El resultado será similar a la imagen de arriba. Todo funcionará incluso si agrega relleno. Sin embargo, sólo para una línea. Si necesita más texto en un elemento, entonces este método no trabajará.

Convierte bloque en celda de tabla. La esencia de este método es que la propiedad vertical-align: middle actúa sobre la celda de la tabla, que centra el elemento verticalmente. En consecuencia, en este caso, el bloque debe configurarse de la siguiente manera:

div (pantalla: celda de tabla; alineación vertical: medio;)

Este método es bueno porque puedes alinear tanto texto como quieras en el centro. Pero es mejor establecer display: table en el bloque en el que está anidado nuestro div, de lo contrario, es posible que no funcione.

Bueno, aquí llegamos al último truco de hoy: esta es la alineación vertical de los bloques. Debe decirse que, de nuevo, no hay ninguna propiedad destinada específicamente para esto, pero hay algunos trucos que debe tener en cuenta.

Establecer compensaciones como un porcentaje. Si conoce la altura del elemento principal y coloca otro elemento de nivel de bloque dentro de él, puede centrarlo usando un porcentaje de relleno. Por ejemplo, el padre tiene una altura de 600 px. Pones un bloque en él que tiene una altura de 300px. ¿Cuánto necesita retroceder desde arriba y desde abajo para centrarlo? 150 píxeles cada uno, que es el 25 % de la altura de los padres.

Este método le permite realizar el centrado solo cuando las dimensiones le permiten realizar cálculos. Y si tiene un padre de 887 píxeles de altura, entonces no podrá escribir nada exactamente, esto ya está claro.

Inserta un elemento en una celda de la tabla. Nuevamente, si convertimos el elemento principal en una celda de tabla, el bloque insertado en él se centrará automáticamente en forma vertical. Para hacer esto, el padre solo necesita establecer vertical-align: middle.

Y si además de esto, también escribimos margin: 0 auto, ¡entonces el elemento estará centrado horizontalmente!