Bloque fijo en el centro de la página. Cómo alinear texto en HTML con el centro, el ancho y los bordes de la página
Muy a menudo la tarea es alinear un bloque en el centro de la página/pantalla, y aun así sin un script Java, sin establecer dimensiones rígidas o sangrías negativas, y para que las barras de desplazamiento funcionen para el padre si el bloque excede su tamaño. . En Internet hay muchos ejemplos monótonos sobre cómo alinear un bloque con el centro de la pantalla. Como regla general, la mayoría de ellos se basan en los mismos principios.
A continuación se detallan las principales formas de resolver el problema, sus pros y sus contras. Para comprender la esencia de los ejemplos, recomiendo reducir el alto/ancho de la ventana de resultados en los ejemplos de los enlaces proporcionados.
Opción 1: sangría negativa.
Posicionamiento bloquear utilizando los atributos superior e izquierdo en un 50% y conociendo la altura y el ancho del bloque de antemano, establezca un margen negativo, que es igual a la mitad del tamaño bloquear. Una gran desventaja de esta opción es que es necesario contar las sangrías negativas. También bloquear no se comporta del todo correctamente cuando está rodeado de barras de desplazamiento; simplemente se corta porque tiene márgenes negativos.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 50%; izquierda : 50%; margen: -125px 0 0 -125px; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno; ) )
Opción 2. Sangría automática.
Menos común, pero similar al primero. Para bloquear Establecemos el ancho y el alto, colocamos los atributos arriba a la derecha, abajo a la izquierda en 0 y configuramos el margen automático. La ventaja de esta opción es que funcionan las barras de desplazamiento. padre, si este último tiene 100% de ancho y alto. La desventaja de este método es el ajuste rígido de las dimensiones.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; margen: automático; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno;)
Opción 3. Mesa.
preguntemos padre estilos de tabla, celda padre Establece la alineación del texto al centro. A bloquear Configuramos el modelo de bloque de líneas. Las desventajas que tenemos son las barras de desplazamiento que no funcionan y, en general, la estética de la “emulación” de la tabla no lo es.
Padre ( ancho: 100%; alto: 100%; pantalla: tabla; posición: absoluta; arriba: 0; izquierda: 0; > .inner ( pantalla: tabla-celda; alineación de texto: centro; alineación vertical: medio; ) ) .block ( mostrar: bloque en línea; img ( mostrar: bloque; borde: ninguno; ) )
Para agregar un pergamino a este ejemplo, deberá agregar un elemento más al diseño.
Ejemplo: jsfiddle.net/serdidg/fk5nqh52/3.
Opción 4. Pseudoelemento.
Esta opción carece de todos los problemas enumerados en los métodos anteriores y también resuelve los problemas originales. El caso es que padre establecer estilos pseudo elemento antes, es decir, 100% de altura, alineación central y modelo de bloque en línea. Es lo mismo con bloquear Se establece un modelo de bloque de líneas, centrado. A bloquear no "cayó" bajo pseudo elemento, cuando las dimensiones del primero son mayores que padre, indicar padre espacio en blanco: nowrap y tamaño de fuente: 0, después de lo cual bloquear cancele estos estilos con lo siguiente: espacio en blanco: normal. En este ejemplo, se necesita font-size: 0 para eliminar el espacio resultante entre padre Y bloquear debido al formato del código. El espacio se puede eliminar de otras formas, pero se considera mejor simplemente evitarlo.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes ( altura: 100%; visualización: bloque en línea; alineación vertical: medio; contenido: "";
O, si necesita que el padre ocupe solo el alto y el ancho de la ventana, y no toda la página:
Padre (posición: fija; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes (altura: 100%; pantalla: bloque en línea; alineación vertical: medio; contenido: "" (pantalla: bloque; borde: ninguno;))
Opción 5. Caja flexible.
Una de las formas más sencillas y elegantes es utilizar flexbox. No requiere movimientos corporales innecesarios, describe con bastante claridad la esencia de lo que está sucediendo y es muy flexible. Lo único que vale la pena recordar al elegir este método es la compatibilidad con IE desde la versión 10 inclusive. caniuse.com/#feat=flexbox
Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; pantalla: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block (fondo: #60a839; img (pantalla: bloque; borde: ninguno;))
Opción 6. Transformar.
Adecuado si estamos limitados por la estructura y no hay forma de manipular el elemento padre, pero el bloque necesita estar alineado de alguna manera. La función CSS Translate() vendrá al rescate. Un valor de posicionamiento absoluto del 50% ubicará la esquina superior izquierda del bloque exactamente en el centro, luego un valor de traducción negativo moverá el bloque en relación con sus propias dimensiones. Tenga en cuenta que pueden aparecer efectos negativos en forma de bordes borrosos o estilo de fuente. Además, este método puede generar problemas al calcular la posición del bloque usando java-script. A veces, para compensar la pérdida del 50% del ancho debido al uso de la propiedad izquierda de CSS, se puede utilizar la regla especificada para el bloque. ayuda: margen derecho: -50%;
Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir( -50%, -50%); img (pantalla: bloque;))
Opción 7. Botón.
Opción de usuario donde bloquear enmarcado en una etiqueta de botón. El botón tiene la propiedad de centrar todo lo que hay dentro de él, es decir, los elementos del modelo en línea y de bloque en línea (bloque en línea). En la práctica no recomiendo usarlo.
Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; fondo: ninguno; borde: ninguno; contorno: ninguno; ) .block (display: inline-block; img (pantalla: bloque;; borde: ninguno; ) )
Prima
Usando la idea de la cuarta opción, puede establecer márgenes externos para bloquear, y este último se mostrará adecuadamente rodeado de barras de desplazamiento.Ejemplo: jsfiddle.net/serdidg/nfqg9rza/2.
También puedes alinear la imagen al centro, y si la imagen es más grande padre, escale al tamaño padre.
Ejemplo: jsfiddle.net/serdidg/nfqg9rza/3.
Ejemplo con una imagen grande:
Vlad Merzhevich
Debido al hecho de que el contenido de las celdas de la tabla se puede alinear simultáneamente horizontal y verticalmente, se amplían las posibilidades para 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 necesaria principalmente para establecer conexiones visuales entre diferentes elementos, así como para agruparlos.
Centrado vertical
Una forma de mostrarle al visitante el enfoque y el nombre del sitio es utilizar una página de presentación. Esta es la primera página en la que, por regla general, hay una pantalla de presentación flash o una imagen que expresa la idea principal del sitio. La imagen también es un enlace a otras secciones del sitio. Debe colocar esta imagen en el centro de la ventana del navegador, independientemente de la resolución del monitor. Para ello, puede utilizar una mesa con un ancho y alto del 100% (ejemplo 1).
Ejemplo 1: centrar el dibujo
|
En este ejemplo, la alineación horizontal se establece utilizando el parámetro de etiqueta align="center"
Para establecer la altura de la mesa al 100%, debe eliminar, el código deja de ser válido.
Usar el ancho y el alto para cubrir toda el área disponible de la página web garantiza que el contenido de la tabla estará alineado exactamente 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
Veamos algunos ejemplos de alineación de texto según la siguiente figura.
Alineación superior
Para especificar la alineación superior del contenido de la celda, para una etiqueta
Ejemplo 2: uso de valign
| Columna 1 | Columna 2 |
En este ejemplo, las características de la celda se controlan mediante parámetros de etiqueta.
En particular, la alineación en las celdas se especifica mediante las propiedades de alineación vertical y alineación de texto (ejemplo 3).
| Columna 1 | Columna 2 |
Para acortar el código, este ejemplo utiliza agrupación de selectores porque las propiedades de alineación vertical y relleno se aplican a dos celdas al mismo tiempo.
La alineación inferior se realiza de la misma manera, pero en lugar del valor superior, se utiliza el valor inferior.
Alineación central
De forma predeterminada, el contenido de las celdas está alineado con el centro de su línea vertical, por lo que si las columnas tienen diferentes alturas, debe establecer la alineación con el borde superior.
A veces aún es necesario 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 se encuentra en el borde derecho. Para organizar los elementos de esta manera, necesitará una tabla con tres celdas. Las celdas exteriores deben tener las mismas dimensiones, en la celda del medio la alineación se realiza en el centro y en la de la derecha, a lo largo del borde derecho (ejemplo 4). Esta cantidad de celdas es necesaria para garantizar que la fórmula esté ubicada en el centro.
 |
(18.6) |
Ejemplo 4: alineación de fórmulas
En este ejemplo, la primera celda de la tabla se deja vacía; sólo sirve para crear una sangría, que, por cierto, también se puede configurar mediante estilos.
Alinear elementos de formulario
Utilizando tablas, es conveniente determinar la posición de los campos del formulario, especialmente cuando están intercalados con texto. Una de las opciones de diseño del formulario, destinada a ingresar un comentario, se muestra en la Fig. 3.
Para asegurarse de que el texto junto a los campos del formulario esté alineado a la derecha y los elementos del formulario estén alineados a la izquierda, necesitará 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).
Añadir un comentario
En este ejemplo, para aquellas celdas donde se requiere alineación correcta, se agrega el atributo align="right".
Para garantizar que la etiqueta Comentario esté ubicada en la parte superior del texto de varias líneas, la celda correspondiente se configura en la parte superior alineada usando el atributo valign.
La alineación de elementos horizontal y verticalmente se puede realizar de varias formas. La elección del método depende del tipo de elemento (bloque o en línea), el tipo de posicionamiento, tamaño, etc.
1. Alineación horizontal con el centro del bloque/páginaSi desea alinear un elemento en línea de esta manera, debe configurarlo para mostrar: bloque;
1.2. Si un bloque está anidado dentro de otro bloque y su ancho no está especificado/especificado:
1.3. Si el bloque tiene un ancho y necesita estar centrado en su bloque principal:
1.4. Si los bloques no tienen un ancho especificado, puedes centrarlos usando un bloque contenedor principal:
2. Alineación vertical
2.1. Si el texto ocupa una línea, por ejemplo, para botones y elementos de menú:
.botón (alto: 50px; alto de línea: 50px;)2.2. Para alinear verticalmente un bloque dentro de un bloque principal:
2.3. Alineación vertical por tipo de mesa:
2.4. Si un bloque tiene un ancho y alto determinados y necesita estar centrado en su bloque principal:
2.5. Posicionamiento absoluto en el centro de la página/bloque mediante transformación CSS3:
si se especifican dimensiones para el elemento
div ( ancho: 300px; /*establecer el ancho del bloque*/ altura:100px; /*establecer la altura del bloque*/ transformar: traducir(-50%, -50%); posición: absoluta; arriba: 50 %; izquierda: 50% ;
si el elemento no tiene dimensiones y no está vacío
Algún texto aquí
Del autor: Os doy la bienvenida nuevamente a las páginas de nuestro 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
En CSS, centrar un bloque es fácil. Esta es la técnica más conocida para muchos, pero me gustaría hablar de ella ahora mismo, antes que nada. Esto significa alineación centrada horizontalmente con respecto al elemento principal. ¿Cómo se hace? Digamos que tenemos un contenedor y nuestro sujeto experimental está en él:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Supongamos que este es el encabezado del sitio. No se extiende por todo el ancho de la ventana y debemos centrarlo. Escribimos así:
#encabezamiento( ancho/máximo-ancho: 800px; margen: 0 automático; |
Necesitamos especificar el ancho exacto o máximo y luego escribir la propiedad clave: margen: 0 auto. Establece los márgenes exteriores de nuestro encabezado, el primer valor determina los márgenes superior e inferior, y el segundo determina los márgenes derecho e izquierdo. El valor auto le dice 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 de texto
Esta también es una técnica muy sencilla. 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 necesitamos. Incluso puedes alinear una imagen de la misma manera, porque también es un elemento en línea por defecto.
Alinear el texto verticalmente
Pero esto es más complicado. De forma predeterminada, no existe una propiedad simple y conocida que centre fácilmente el texto verticalmente en un contenedor de bloques. Sin embargo, existen varias técnicas que los maquetadores han ideado a lo largo de los años.
Establezca la altura del bloque usando relleno. La forma no es establecer una altura explícita usando la altura, sino crearla artificialmente usando rellenos en la parte superior e inferior, que deberían ser iguales. Creemos cualquier bloque y escribamos en él las siguientes propiedades:
div(fondo: #ccc; relleno: 30px 0; )
div( antecedentes: #ccc; relleno: 30px 0; |
El fondo es sólo para mostrar 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 la altura de línea para el bloque. Creo que esta es una forma más correcta si necesitas alinear una línea de texto. Con él, puedes escribir la altura de forma normal, usando la propiedad de altura. Después de eso, también necesita establecer la altura de la línea, la misma que la altura del bloque en su conjunto.
div (altura: 60 px; altura de línea: 60 px;)
div( altura: 60 píxeles; 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 el elemento, este método no funcionará.
Convierte un bloque en una celda de tabla. La esencia de este método es que la celda de la tabla tiene la propiedad vertical-align: middle, 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;)
div( mostrar: tabla - celda; vertical - alinear: medio; |
Este método es bueno porque puedes alinear todo el texto que quieras en el centro. Pero es mejor escribir display: table en el bloque en el que está anidado nuestro div; de lo contrario, es posible que no funcione.
Bueno, aquí llegamos a la última técnica de hoy: esta es la alineación vertical de los propios bloques. Hay que decir que, una vez más, no existe ninguna propiedad destinada específicamente a esto, pero hay algunos trucos que debes conocer.
Establezca sangrías como porcentaje. Si conoce la altura de un elemento principal y coloca otro elemento de bloque dentro de él, puede centrarlo usando un porcentaje de relleno. Por ejemplo, el padre tiene una altura de 600 píxeles. Colocas un bloque en él que tiene 300 píxeles de alto. ¿Cuánto necesitas retroceder en la parte superior e inferior para centrarlo? 150 píxeles cada uno, que es el 25% de la altura de los padres.
Este método permite la alineación sólo cuando las dimensiones permiten realizar cálculos. Y si tu padre tiene 887 píxeles de altura, entonces no podrás registrar nada con precisión, esto ya está claro.
Insertar un elemento en una celda de la tabla. Nuevamente, si transformamos el elemento principal en una celda de la tabla, el bloque insertado en él se centrará automáticamente verticalmente. Para hacer esto, el padre solo necesita configurar vertical-align: middle.
Y si, además de esto, también escribimos margen: 0 auto, ¡entonces el elemento quedará centrado horizontalmente!
Todo diseñador de diseño se enfrenta constantemente a la necesidad de alinear el contenido en un bloque: horizontal o verticalmente. Hay varios buenos artículos sobre este tema, pero todos ofrecen muchas opciones interesantes, pero pocas prácticas, por lo que hay que dedicar más tiempo a resaltar los puntos principales. Decidí presentar esta información en una forma que me resulte conveniente, para no buscar más en Google.
Alinear bloques con tamaños conocidos
La forma más sencilla de utilizar CSS es alinear bloques que tengan una altura conocida (para alineación vertical) o un ancho (para alineación horizontal).
Alineación usando relleno
A veces no puedes centrar un elemento, sino agregarle bordes usando el botón " relleno".
Por ejemplo, hay una imagen de 200 por 200 píxeles y necesita centrarla en un bloque de 240 por 300. Podemos establecer la altura y el ancho del bloque exterior = 200 píxeles y agregar 20 píxeles en la parte superior e inferior. y 50 a la izquierda y a la derecha.
.example-wrapper1 (fondo: #535E73; ancho: 200px; alto: 200px; relleno: 20px 50px;)Alinear bloques absolutamente posicionados
Si el bloque está configurado en " posición: absoluta", entonces se puede posicionar en relación con su padre más cercano con "posición: relativa". Esto requiere todas las propiedades (" arriba","bien","abajo","izquierda") del bloque interno para asignar el mismo valor, así como "margen: auto".
*Hay un matiz: el ancho (alto) del bloque interior + el valor de izquierda (derecha, abajo, arriba) no debe exceder las dimensiones del bloque principal. Es más seguro asignar 0 (cero) a las propiedades izquierda (derecha, abajo, arriba).
.example-wrapper2 (posición: relativa; altura: 250 px; fondo: url(space.jpg); ) .cat-king (ancho: 200 px; altura: 200 px; posición: absoluta; arriba: 0; izquierda: 0; abajo: 0; derecha: 0; margen: automático; fondo: url(king.png);Alineación horizontal
Alineación usando "text-align: center"
Para alinear texto en un bloque, existe una propiedad especial " alineación de texto". Cuando se establece en " centro"Cada línea de texto se alineará horizontalmente. Para texto de varias líneas, esta solución se usa muy raramente; más a menudo, esta opción se puede encontrar para alinear tramos, enlaces o imágenes.
Una vez tuve que crear un texto para mostrar cómo funciona la alineación del texto usando CSS, pero no se me ocurrió nada interesante. Al principio decidí copiar una rima infantil en alguna parte, pero recordé que esto podría estropear la singularidad del artículo y nuestros queridos lectores no podrán encontrarlo en Google. Y luego decidí escribir este párrafo; después de todo, el punto no está en él, sino en la alineación.
.texto de ejemplo (alineación de texto: centro; relleno: 10px; fondo: #FF90B8;)Vale la pena señalar que esta propiedad funcionará no sólo para texto, sino también para cualquier elemento en línea ("display: inline").
Pero este texto está alineado a la izquierda, pero está en un bloque centrado en relación con el contenedor.
.example-wrapper3 (alineación de texto: centro; fondo: #FF90B8;) .inline-text (pantalla: bloque en línea; ancho: 40%; relleno: 10px; alineación de texto: izquierda; fondo: #FFE5E5;)Alinear bloques usando margen
Los elementos de bloque con un ancho conocido se pueden alinear fácilmente horizontalmente configurándolos en "margen izquierdo: automático; margen derecho: automático". Generalmente se utiliza la abreviatura: " margen: 0 automático" (Se puede utilizar cualquier valor en lugar de cero). Pero este método no es adecuado para la alineación vertical.
.lama-wrapper (alto: 200px; fondo: #F1BF88;) .lama1 (alto: 200px; ancho: 200px; fondo: url(lama.jpg); margen: 0 automático;)Así es como se deben alinear todos los bloques, siempre que sea posible (donde no se requiere un posicionamiento fijo o absoluto): es lo más lógico y adecuado. Aunque esto parece obvio, a veces he visto ejemplos aterradores con sangrías negativas, así que decidí aclararlo.
Alineación vertical
La alineación vertical es mucho más problemática; aparentemente, esto no estaba previsto en el CSS. Hay varias formas de lograr el resultado deseado, pero no todas son muy bonitas.
Alineación con la propiedad line-height
En el caso de que solo haya una línea en un bloque, puede lograr su alineación vertical usando el botón " altura de línea" y configurarlo a la altura deseada. Para mayor confiabilidad, vale la pena configurar también "altura", cuyo valor será igual al valor de "altura de línea", porque este último no es compatible con todos los navegadores.
.example-wrapper4 (alto de línea: 100 px; color: #DC09C0; fondo: #E5DAE1; alto: 100 px; alineación de texto: centro;)También es posible lograr la alineación de bloques con varias líneas. Para hacer esto, deberá usar un bloque contenedor adicional y establecerle la altura de la línea. Un bloque interno puede ser multilínea, pero debe estar "en línea". Debes aplicarle "alineación vertical: media".
.example-wrapper5 (altura de línea: 160 px; altura: 160 px; tamaño de fuente: 0; fondo: #FF9B00;) .example-wrapper5 .text1 (pantalla: bloque en línea; tamaño de fuente: 14 px; altura de línea: 1.5; alineación vertical: medio; fondo: #FFFAF2; color: #FF9B00;El bloque contenedor debe tener configurado "tamaño de fuente: 0". Si no establece el tamaño de fuente en cero, el navegador agregará algunos píxeles adicionales. También deberá especificar el tamaño de fuente y la altura de la línea para el bloque interno, porque estas propiedades se heredan del padre.
Alineación vertical en tablas.
Propiedad " alineación vertical" también afecta a las celdas de la tabla. Con el valor establecido en "medio", el contenido dentro de la celda se alinea con el centro. Por supuesto, el diseño de la tabla se considera arcaico hoy en día, pero en casos excepcionales se puede simular especificando " pantalla: celda de tabla".
Normalmente uso esta opción para la alineación vertical. A continuación se muestra un ejemplo de diseño tomado de un proyecto terminado. Lo que interesa es la imagen que está centrada verticalmente de esta manera.
.one_product .img_wrapper (pantalla: celda de tabla; altura: 169 px; alineación vertical: medio; desbordamiento: oculto; fondo: #fff; ancho: 255 px;) .one_product img (altura máxima: 169 px; ancho máximo: 100 %; ancho mínimo: 140 px; pantalla: bloque; margen: 0 automático;Debe recordarse que si un elemento tiene un conjunto "flotante" distinto de "ninguno", en cualquier caso será bloque (mostrar: bloque); entonces tendrá que usar un contenedor de bloque adicional.
Alineación con un elemento en línea adicional
Y para elementos en línea puedes usar " alineación vertical: medio". Además, todos los elementos con " pantalla: en línea" que están en la misma línea se alinearán con una línea central común.
Debe crear un bloque auxiliar con una altura igual a la altura del bloque principal, luego el bloque deseado estará centrado. Para ello conviene utilizar los pseudoelementos:antes o:después.
.example-wrapper6 (altura: 300px; alineación de texto: centro; fondo: #70DAF1;) .pudge (pantalla: bloque en línea; alineación vertical: medio; fondo: url(pudge.png); color de fondo: # fff; ancho: 200px; alto: 200px; .riki (pantalla: bloque en línea; alto: 100%; alineación vertical: medio;)Pantalla: flexión y alineación
Si no le importan mucho los usuarios de Explorer 8, o le importa tanto que está dispuesto a insertar un fragmento de JavaScript adicional para ellos, entonces puede usar "display: flex". Los cuadros flexibles son excelentes para solucionar problemas de alineación y simplemente escriba "margen: automático" para centrar el contenido en su interior.
Hasta ahora, prácticamente nunca me he encontrado con este método, pero no existen restricciones especiales para ello.
Bueno, eso es todo lo que quería escribir sobre la alineación de CSS. ¡Ahora centrar el contenido no será un problema!
