Cómo firmar una tabla correctamente. Extractos del nuevo invitado sobre el diseño de documentos de texto. Cómo diseñar el área de datos de salida

Creo que muchos de ustedes que han tenido que lidiar con el diseño se han encontrado con la necesidad de alinear elementos verticalmente y conocen las dificultades que surgen al alinear un elemento con el centro.

Sí, existe una característica especial para la alineación vertical en CSS. propiedad de alineación vertical con muchos significados. Sin embargo, en la práctica no funciona como se esperaba. Intentemos resolver esto.

Comparemos los siguientes enfoques. Alinear usando:

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

Para ilustrarlo, considere el siguiente ejemplo.

Hay dos elemento div, con uno de ellos anidado dentro del otro. Démosles las clases correspondientes: exterior e interior.

El desafío es alinear el elemento interior con el centro del elemento exterior.

Primero, consideremos el caso en el que las dimensiones del exterior y Unidad interior conocido. Agreguemos la regla 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 elementos que tienen un modo de visualización en línea o en bloque en línea.

Establezcamos los tamaños de los bloques, así como colores de fondo para ver sus límites.

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; alto: 100 px; color de fondo :#fcc)
Luego de aplicar los estilos, veremos que el bloque interior está alineado horizontalmente, pero no verticalmente:
http://jsfiddle.net/c1bgfffq/

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

Existen varias técnicas para solucionar este problema. A continuación veremos más de cerca cada uno de ellos.

Alineación usando una tabla

La primera solución que me viene a la mente es sustituir el bloque exterior por una tabla de una celda. En este caso, la alineación se aplicará al contenido de la celda, es decir, al bloque interior.

http://jsfiddle.net/c1bgfffq/1/

Menos obvio esta decisión– desde un punto de vista semántico, es incorrecto utilizar tablas para la alineación. La segunda desventaja es que para crear una tabla necesitas agregar otro elemento alrededor. unidad externa.

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

.outer-wrapper (pantalla: tabla;) .outer (pantalla: tabla-celda;)
Sin embargo, el bloque exterior seguirá siendo una mesa con todas las consecuencias consiguientes.

Alineación usando sangrías

Si se conocen las alturas de los bloques interior y exterior, entonces la alineación se puede establecer utilizando las sangrías verticales del bloque interior mediante la fórmula: (H exterior – H interior) / 2.

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

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

Alineación usando altura de línea

Si sabe que el bloque interno no debe ocupar más de una línea de texto, puede usar la propiedad line-height y configurarla. igual a la altura bloque externo. Dado que el contenido del bloque interno no debe ajustarse a la segunda línea, se recomienda agregar también las reglas de espacio en blanco: nowrap y overflow: oculto.

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

También esta tecnica También se puede utilizar para nivelar. texto multilínea, si redefine el valor de altura de línea para el bloque interno y también agrega las reglas display: inline-block y vertical-align: middle.

Exterior (altura: 200 px; altura de línea: 200 px;). Interior (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 externo.

Alineación mediante "estiramiento"

Este método se puede utilizar cuando se desconoce la altura del bloque externo, pero se conoce la altura del bloque interno.

Para hacer esto necesitas:

1. configurado en unidad externa posicionamiento relativo, y al interno – absoluto;
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 relleno vertical del bloque interior en automático.

.outer (posición: relativa;) .inner (altura: 100px; posición: absoluta; arriba: 0; abajo: 0; margen: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

La idea detrás de esta técnica es que establecer una altura para un bloque estirado y en posición absoluta obliga al navegador a calcular márgenes verticales en igual proporción si su valor se establece en auto .

Alineación con margen superior negativo

Este método se ha vuelto ampliamente conocido y se utiliza con mucha frecuencia. Al igual que el anterior, se utiliza cuando se desconoce la altura del bloque exterior, pero se conoce la altura del interior.

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

Exterior (posición: relativa;) .interior (altura: 100 px; posición: absoluta; superior: 50%; margen superior: -50 px;)
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

Este método es similar al anterior, pero se puede utilizar cuando se desconoce la altura de la unidad interior. En este caso, en lugar de establecer un relleno de píxeles negativo, puede usar la propiedad de transformación y mover el bloque interno hacia arriba usando la función traducirY y un valor de -50%.

Exterior (posición: relativa;) .interior (posición: absoluta; superior: 50%; transformación: traducirY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

Por qué en método anterior¿No podrías establecer el valor como porcentaje? Dado que los valores porcentuales propiedades de margen calculado en relación con elemento padre, un valor del 50% equivaldría a la mitad de la altura del bloque exterior y necesitábamos elevar el bloque interior a la mitad de su propia altura. La propiedad transform es perfecta para esto.

La desventaja de este método es que no se puede utilizar si la unidad interior tiene un posicionamiento absoluto.

Alineación con Flexbox

La forma más moderna de alineación vertical es utilizar Flexible Box Layout (conocido popularmente como Flexbox). Este módulo le permite controlar de manera flexible la posición de los elementos en la página, organizándolos casi en cualquier lugar. La alineación central para Flexbox es una tarea muy sencilla.

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

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

La desventaja de este método es que Flexbox sólo es compatible con los navegadores modernos.

¿Qué método debo elegir?

Debe comenzar desde el planteamiento del problema:

• Para alinear texto verticalmente, es mejor usar sangrías verticales o propiedad de altura de línea.
• Para elementos absolutamente posicionados con una altura conocida (como iconos) es ideal un método adecuado con una propiedad de margen superior negativo.
• Para más casos complejos Cuando se desconoce la altura del bloque, es necesario utilizar un pseudoelemento o la propiedad de transformación.
• Bueno, si tienes tanta suerte que no necesitas admitir versiones anteriores del navegador IE, entonces, por supuesto, es mejor usar Flexbox.

Etiquetas: Agregar etiquetas

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 especificar alineación de la imagen, texto, campos de formulario y otros elementos relacionados entre sí y con la página web en su conjunto. En general, la alineación es principalmente necesaria para establecer comunicación visual entre diferentes elementos, así como sus agrupaciones.

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 en este ejemplo la alineación horizontal se establece usando el parámetro de etiqueta align="center" y es posible que el contenido de la celda no esté centrado verticalmente, ya que esta es la posición predeterminada.

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

Debido a la combinación alinear atributos Etiqueta (alineación horizontal) y valign (alineación vertical) , está permitido establecer varios tipos de posiciones de elementos entre sí. En la Fig. La Figura 1 muestra formas de alinear elementos horizontalmente.

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 requerido para instalar atributo valign con el valor top (ejemplo 2).

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. , pero también es más conveniente cambiar de estilo. En particular, la alineación en las celdas se especifica mediante las propiedades de alineación vertical y alineación de texto (ejemplo 3).

Ejemplo 3: Aplicar estilos para la alineación

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.

Alinear por borde inferior Esto se hace 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 todavía necesitas irte método original alineación, por ejemplo, al colocar fórmulas como se muestra en la Fig. 2.

EN tal 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 está centrada y en la celda 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.

Ejemplo 4: alineación de fórmulas

(18.6)

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 que el texto cerca de los campos del formulario esté alineado a la derecha y los elementos del formulario estén alineados a la izquierda, necesitará una tabla con 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: Alinear campos de formulario

Nombre
Correo electrónico
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 como alineada superiormente usando el atributo valign.

CSS

HTML

Creo que muchos de ustedes que han tenido que lidiar con el diseño se han encontrado con la necesidad de alinear elementos verticalmente y conocen las dificultades que surgen al alinear un elemento con el centro.

Sí, existe una propiedad especial de alineación vertical de múltiples valores en CSS para la alineación vertical. Sin embargo, en la práctica no funciona como se esperaba. Intentemos resolver esto.

Comparemos los siguientes enfoques. Alinear usando:

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

Para ilustrarlo, considere el siguiente ejemplo.

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

El desafío es alinear el elemento interior con el centro del elemento exterior.

Primero, consideremos el caso en el que las dimensiones de los bloques externos e internos conocido. Agreguemos la regla 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 elementos que tienen un modo de visualización en línea o en bloque en línea.

Establezcamos los tamaños de los bloques, así como los colores de fondo para que podamos 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; alto: 100 px; color de fondo :#fcc)
Luego de aplicar los estilos, veremos que el bloque interior está alineado horizontalmente, pero no verticalmente:
http://jsfiddle.net/c1bgfffq/

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

Existen varias técnicas para solucionar este problema. A continuación veremos más de cerca cada uno de ellos.

Alineación usando una tabla

La primera solución que me viene a la mente es sustituir el bloque exterior por una tabla de una celda. En este caso, la alineación se aplicará al contenido de la celda, es decir, al bloque interior.

http://jsfiddle.net/c1bgfffq/1/

La desventaja obvia de esta solución es que, desde un punto de vista semántico, es incorrecto utilizar tablas para la alineación. La segunda desventaja es que crear una tabla requiere agregar otro elemento alrededor del bloque exterior.

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

.outer-wrapper (pantalla: tabla;) .outer (pantalla: tabla-celda;)
Sin embargo, el bloque exterior seguirá siendo una mesa con todas las consecuencias consiguientes.

Alineación usando sangrías

Si se conocen las alturas de los bloques interior y exterior, entonces la alineación se puede establecer utilizando las sangrías verticales del bloque interior mediante la fórmula: (H exterior – H interior) / 2.

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

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

Alineación usando altura de línea

Si sabe que el bloque interior no debe ocupar más de una línea de texto, puede utilizar la propiedad line-height y establecerla igual a la altura del bloque exterior. Dado que el contenido del bloque interno no debe ajustarse a la segunda línea, se recomienda agregar también las reglas de espacio en blanco: nowrap y overflow: oculto.

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 utilizar para alinear texto de varias líneas si redefine el valor de altura de línea para el bloque interno y también agrega las reglas display: inline-block y vertical-align: middle.

Exterior (altura: 200 px; altura de línea: 200 px;). Interior (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 externo.

Alineación mediante "estiramiento"

Este método se puede utilizar cuando se desconoce la altura del bloque externo, pero se conoce la altura del bloque interno.

Para hacer esto necesitas:

1. establecer posicionamiento relativo al bloque externo y posicionamiento absoluto al bloque interno;
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 relleno vertical del bloque interior en automático.

.outer (posición: relativa;) .inner (altura: 100px; posición: absoluta; arriba: 0; abajo: 0; margen: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

La idea detrás de esta técnica es que establecer una altura para un bloque estirado y en posición absoluta hace que el navegador calcule el relleno vertical en una proporción igual si está configurado en auto.

Alineación con margen superior negativo

Este método se ha vuelto ampliamente conocido y se utiliza con mucha frecuencia. Al igual que el anterior, se utiliza cuando se desconoce la altura del bloque exterior, pero se conoce la altura del interior.

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

Exterior (posición: relativa;) .interior (altura: 100 px; posición: absoluta; superior: 50%; margen superior: -50 px;)
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

Este método es similar al anterior, pero se puede utilizar cuando se desconoce la altura de la unidad interior. En este caso, en lugar de establecer un relleno de píxeles negativo, puede usar la propiedad de transformación y mover el bloque interno hacia arriba usando la función traducirY y un valor de -50%.

Exterior (posición: relativa;) .interior (posición: absoluta; superior: 50%; transformación: traducirY(-50%); )
http://jsfiddle.net/c1bgfffq/9/

¿Por qué fue imposible establecer el valor como porcentaje en el método anterior? Dado que los valores de margen porcentual se calculan en relación con el elemento principal, un valor del 50% sería la mitad de la altura del cuadro exterior y necesitaríamos elevar el cuadro interior a la mitad de su propia altura. La propiedad transform es perfecta para esto.

La desventaja de este método es que no se puede utilizar si la unidad interior tiene un posicionamiento absoluto.

Alineación con Flexbox

La forma más moderna de alineación vertical es utilizar Flexible Box Layout (conocido popularmente como Flexbox). Este módulo le permite controlar de manera flexible la posición de los elementos en la página, organizándolos casi en cualquier lugar. La alineación central para Flexbox es una tarea muy sencilla.

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

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

La desventaja de este método es que Flexbox sólo es compatible con los navegadores modernos.

¿Qué método debo elegir?

Debe comenzar desde el planteamiento del problema:

• Para alinear texto verticalmente, es mejor utilizar sangrías verticales o la propiedad de altura de línea.
• Para elementos absolutamente posicionados con una altura conocida (por ejemplo, iconos), el método con una propiedad de margen superior negativo es ideal.
• Para casos más complejos, cuando se desconoce la altura del bloque, es necesario utilizar un pseudoelemento o la propiedad de transformación.
• Bueno, si tienes tanta suerte que no necesitas admitir versiones anteriores del navegador IE, entonces, por supuesto, es mejor usar Flexbox.

Se pueden alinear elementos horizontal y verticalmente. diferentes caminos. 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ágina

1.1. Si se especifica el ancho del bloque:

div ( ancho: 300px; margen: 0 auto; /*centrar el elemento horizontalmente dentro del bloque principal*/ )

Si necesitas nivelar elemento en línea de esta manera, debe configurarse para mostrar: bloquear;

1.2. Si un bloque está anidado dentro de otro bloque y su ancho no está especificado/especificado:

.wrapper(alineación de texto: centro;)

1.3. Si el bloque tiene un ancho y necesita estar centrado en su bloque principal:

.wrapper (posición: relativa; /*establecer el posicionamiento relativo para el bloque principal para que luego podamos posicionar absolutamente el bloque dentro de él*/) .box ( ancho: 400px; posición: absoluta; izquierda: 50%; margen izquierdo: -200px; / *desplaza el bloque hacia la izquierda una distancia igual a la mitad de su ancho*/ )

1.4. Si los bloques no tienen un ancho especificado, puedes centrarlos usando un bloque contenedor principal:

.wrapper (text-align: center; /*colocar el contenido del bloque en el centro*/) .box ( display: inline-block; /*organizar los bloques en una fila horizontalmente*/ margin-right: -0.25em ; /*eliminar el espacio derecho entre bloques*/ )

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:

.wrapper (posición: relativa;).box (altura: 100px; posición: absoluta; superior: 50%; margen: -50px 0 0 0; )

2.3. Alineación vertical por tipo de mesa:

.wrapper (pantalla: tabla; ancho: 100%;) .box (pantalla: tabla-celda; altura: 100px; alineación de texto: centro; alineación vertical: medio;)

2.4. Si un bloque tiene un ancho y alto determinados y necesita estar centrado en su bloque principal:

.wrapper (posición: relativa;) .box (alto: 100px; ancho: 100px; posición: absoluta; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; margen: automático; desbordamiento: automático; /*to el contenido no se difundió */ )

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

h1 (margen: 0; transformar: traducir(-50%, -50%); posición: absoluta; arriba: 50%; izquierda: 50%;)

Alinear elementos en una página web puede no ser una tarea tan fácil, especialmente si estamos hablando acerca de sobre alinear el texto verticalmente. Esta pregunta se encuentra a menudo en los foros y resolver este problema es especialmente difícil para los usuarios novatos. Pero en realidad aquí no hay nada complicado. Todo lo que necesitas es un poco de conocimiento. mesa en cascada estilos CSS. Ya que todo esto se hace según sus reglas.

La alineación vertical del texto se puede lograr con al menos cinco diferentes caminos. Cada uno de ellos es bueno a su manera, dadas las circunstancias y detalles de la situación. Consideraremos varios ejemplos y, según las condiciones, usted elegirá la rotación adecuada para usted.

Primer método con altura de línea.

El primer método es muy banal y gran inconveniente, lo que limita su aplicación. Pero aún así, digan lo que digan, puede ser útil e incluso traer resultado deseado. Será alineación condicional porque esencialmente estamos configurando la altura de la línea para que coincida con la altura del bloque usando la propiedad line-height.

primer ejemplo. demostración n.° 1

/* No.1 */ .talign1( border: 1px solid red; height:200px;/* block height */ ) .talign1 > p( line-height:200px;/* establece la altura de la línea de acuerdo con la altura del bloque * / margin :0;/* eliminar el relleno externo, si lo hay */ text-align:center;/* alinear el texto horizontalmente con el centro */ padding: 0;/* eliminar relleno, si existen */ ) /* fin №1*/

Exactamente de la misma manera, es posible implementar la imagen en el centro vertical, pero agregando una nueva propiedad vertical-align: middle; .

Ejemplo. Demostración n.° 2

/* No.2 */ .talign2( borde: 1px rojo sólido; altura de línea:200px;/* altura de línea de bloque */ ) .talign2 div( text-align:center;/* alinear elementos centrados horizontalmente */ ) . talign2 img( vertical-align:middle;/* alinear las imágenes verticalmente en el centro */ border: 1px solid black; ) /* end №2*/

Alineación con propiedad de posición

Este método se usa ampliamente en muchas tareas de CSS, incluida nuestra tarea. Pero cabe señalar que no es del todo perfecto y tiene sus efectos secundarios. Esto se debe a que el porcentaje de centrado del elemento se centrará en el borde superior izquierdo del bloque interior.

Por lo tanto es necesario establecer significado negativo A márgenes. El tamaño de la hendidura en la parte superior debe corresponder a la mitad de la altura del bloque interno y la hendidura de la izquierda debe corresponder a la mitad del ancho. Así obtenemos el centro absoluto.

En esta opción, probablemente sea necesario saber la altura y el ancho exactos. elemento hijo. De lo contrario, podría producirse un centrado incorrecto.

/* No.3 */ .talign3( borde: 1px rojo sólido; altura:200px;/* altura del bloque */ posición: relativa; ) .talign3 div( posición: absoluta; arriba: 50%; izquierda: 50%; altura : 30%; ancho: 50%; margen: -5% 0 0 -25%; 1px negro sólido;

Alineación con la propiedad de la tabla.

Aquí usamos equipo viejo, convirtiendo los elementos en una tabla con celdas. En este caso, las etiquetas de la tabla

No se usará, pero lo usaremos. Propiedades CSS, como display: table; , mostrar: tabla-celda; . En versiones anteriores de IE este método No funciona y no es necesario. ¿Alguien más realmente los usa?

Ejemplo. demostración n.° 4

/* No.4 */ .talign4( border: 1px solid red; height:200px;/* block height */ display: table; width: 100%; ) .talign4 div( display: table-cell; vertical-align: medio; alineación de texto:centro) /* final #4*/

Alineación con propiedad flexible

Esta es una versión más específica con propiedades que no se encuentran tan a menudo en el diseño de un sitio web. Pero, sin embargo, en casos raros resultan muy útiles.

 Arriba