Alinee el bloque con el centro de la página. Alineación horizontal y vertical de elementos en CSS.

¡Hola! Seguimos dominando los conceptos básicos del lenguaje HTML. Veamos qué necesitas escribir para alinear el texto al centro, al ancho o a los bordes.

Para ir al grano, veamos cómo centrar el texto en HTML de tres maneras diferentes. Los dos últimos están vinculados directamente a la hoja de estilo. Puede ser un archivo CSS que se conecta a las páginas del sitio y define su apariencia.

Método 1: trabajo directo con HTML

En realidad es bastante simple. Vea el ejemplo a continuación.

Alinea el párrafo al centro.

Si necesita mover fragmentos de texto de otra manera, en lugar del parámetro "centro", ingrese los siguientes valores:

• justificar: alinear el texto al ancho de la página;
• derecha – en el borde derecho;
• izquierda - a la izquierda.

Por analogía, puedes mover el contenido que está en los encabezados (h1, h2) y el contenedor (div).

Método 2 y 3: usar estilos

El diseño presentado arriba se puede transformar ligeramente. El efecto será el mismo. Para hacer esto, debe escribir el código a continuación.

Bloque de texto.

De esta forma, el código se escribe directamente en HTML para centrar el contenido del texto.

Existe otra forma alternativa de lograr resultados. Deberá seguir un par de pasos.

Paso 1. En el código principal escribe

Materiales de texto.

Paso 2. En el archivo CSS incluido, ingrese el siguiente código:

Rovno (alineación de texto:centro;)

Observo que la palabra "rovno" es solo el nombre de una clase que se puede llamar de otra manera. Esto queda a criterio del programador.

Por analogía, en HTML puedes centrar, justificar y alinear fácilmente el texto con el borde derecho o izquierdo de la página. Como puedes ver, hay mucho más de una opción para lograr tu objetivo.

Sólo algunas preguntas:

• ¿Estás realizando un proyecto de información sin fines de lucro?
• ¿Quieres que tu sitio web tenga una buena clasificación en los motores de búsqueda?
• ¿Quieres obtener ingresos en línea?

Si todas las respuestas son positivas, entonces basta con mirar un enfoque integrado para el desarrollo de sitios web. La información será especialmente útil si se ejecuta en el CMS de WordPress.

Me gustaría señalar que sus propios sitios web son sólo una de las muchas opciones para generar ingresos pasivos o activos en Internet. Mi blog está dedicado a las oportunidades financieras en línea.

¿Ha trabajado alguna vez en el campo del arbitraje de tráfico, redacción u otras áreas de actividad que generan ingresos primarios o adicionales a través de la colaboración remota? Puedes aprender sobre esto y mucho más ahora mismo en las páginas de mi blog.

Publicaré mucha información realmente útil en el futuro. Manténgase conectado. Si lo deseas, puedes suscribirte a las actualizaciones de Workip por correo electrónico. El formulario de suscripción se encuentra a continuación.

En CSS, algunas cosas aparentemente simples no son tan fáciles de hacer. Una de estas cosas es la alineación, es decir. cuando un elemento necesita posicionarse de cierta manera en relación con otro.

Este artículo presenta algunas soluciones listas para usar que ayudarán a simplificar el trabajo de centrar elementos horizontal y/o verticalmente.

Nota: Debajo de cada solución hay una lista de navegadores que indican las versiones en las que funciona el código CSS especificado.

CSS - Bloque de alineación central

1. Alinear un bloque con el centro de otro. En este caso, el primer y segundo bloque tienen tamaños dinámicos.

... ...

Padre ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; -webkit-transform: traducir(-50%, -50%); -moz-transform: traducir(-50% , -50%); -ms-transformar: traducir(-50%, -50%); -o-transformar: traducir(-50%, -50%);

• Cromo 4.0+
• Firefox 3.6+
• Explorador de Internet 9+
• Ópera 10.5+
• Safari 3.1+

2. Alinear un bloque con el centro de otro. En este caso, el segundo bloque tiene dimensiones fijas.

Parent ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; /* ancho y alto de 2 bloques */ ancho: 500px; alto: 250px; /* Los valores se determinan dependiendo en su tamaño */ /* margen-izquierda = - ancho / 2 */ margen-izquierda: -250px /* margen-top = - altura / 2 */ margen-top: -125px )

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 4.0+
• Ópera 7.0+
• Safari 1.0+

3. Alinear un bloque con el centro de otro. En este caso, el segundo bloque tiene dimensiones especificadas en porcentajes.

Parent ( posición: relativa; ) .child ( posición: absoluta; /* ancho y alto de 2 bloques en % */ alto: 50%; ancho: 50%; /* Los valores se determinan dependiendo de su tamaño en % * / izquierda: 25%; /* (100% - ancho) / 2 */ arriba: 25% /* (100% - alto) / 2 */ )

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 4.0+
• Ópera 7.0+
• Safari 1.0+

CSS - Alineación horizontal

1. Alinear un elemento de bloque (pantalla: bloque) con respecto a otro (en el que se encuentra) horizontalmente:

... ...

Bloquear (margen izquierdo: automático; margen derecho: automático;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 6.0+
• Ópera 3.5+
• Safari 1.0+

2. Alinee un elemento de línea (mostrar: inline) o de bloque de líneas (mostrar: inline-block) horizontalmente:

... ...

Padre (text-align: center;) .child (display: inline-block;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 3.0+
• Explorador de Internet 8.0+
• Ópera 7.0+
• Safari 1.0+

CSS - Alineación vertical

1. Centre un elemento (display: inline, display: inline-block) con respecto al otro (en el que se encuentra) en el centro. El bloque principal en este ejemplo tiene una altura fija, que se establece mediante la propiedad line-height de CSS.

... ...

Padre (altura de línea: 500px;) .child (pantalla: bloque en línea; alineación vertical: medio;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 3.0+
• Explorador de Internet 8.0+
• Ópera 7.0+
• Safari 1.0+

2. Centrar un bloque con respecto a otro verticalmente representando al padre como una tabla y al hijo como una celda de esta tabla.

Padre (pantalla: tabla;) .child (pantalla: tabla-celda; alineación vertical: medio;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 8.0+
• Ópera 7.5+
• Safari 1.0+

Si conoce otros trucos interesantes o soluciones de alineación útiles y listas para usar, compártalas en los comentarios.

18/02/15 21.4K

Si ingresa a cualquier sitio web creado en base a HTML, verá una determinada estructura en capas. Además, su aspecto será similar al de un bizcocho en capas. Si crees que sí, lo más probable es que no hayas comido en mucho tiempo. Así que primero satisface tu hambre y luego te diremos cómo centrar una capa div en tu sitio:

Ventajas del diseño mediante una etiqueta

Hay dos tipos principales de estructura de sitio web:

• Tabular;
• Bloquear.

El diseño tabular era dominante incluso en los albores de Internet. Sus ventajas incluyen la precisión del posicionamiento especificado. Pero, sin embargo, tiene deficiencias evidentes. Los principales son la longitud del código y la baja velocidad de carga.

Cuando se utiliza el diseño tabular, la página web no se mostrará hasta que esté completamente cargada. Mientras que cuando se utilizan bloques div, los elementos se muestran inmediatamente.

Además de la alta velocidad de carga, la construcción en bloque de un sitio web le permite reducir varias veces la cantidad de código html. Incluso mediante el uso de clases CSS.

Sin embargo, se debe utilizar un diseño tabular para estructurar la visualización de datos en la página. Un ejemplo clásico de su uso es la visualización de tablas.

La construcción de bloques basada en etiquetas también se denomina capa por capa, y los bloques en sí se denominan capas. Esto se debe a que cuando se utilizan ciertos valores de propiedad, se pueden apilar uno encima del otro, de manera similar a las capas en Photoshop.

Ayudas de posicionamiento

En el diseño de bloques, es mejor colocar las capas utilizando hojas de estilo en cascada. La principal propiedad CSS responsable del diseño es flotante.
Sintaxis de propiedad:
flotador: izquierda | derecha | ninguno | heredar
Dónde:

• izquierda: alinea el elemento con el borde izquierdo de la pantalla. El flujo alrededor de los elementos restantes se produce a la derecha;
• derecha – alineación a la derecha, flujo alrededor de otros elementos – a la izquierda;
• ninguno: no se permite envolver;
• heredar: hereda el valor del elemento padre.

Veamos un ejemplo sencillo de posicionamiento de divs usando esta propiedad:

#left (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,51,102); ) #right (ancho: 200px; alto: 100px; float: derecha; fondo: rgb(0,255,153); ) Bloque izquierdo bloque derecho

Ahora intentaremos usar la misma propiedad para posicionar el tercer div en el centro de la página. Pero lamentablemente el float no tiene un valor central. Y cuando le das a un nuevo bloque un valor de alineación hacia la derecha o hacia la izquierda, se desplaza en la dirección especificada. Por lo tanto, todo lo que queda es establecer float: left en los tres bloques:

Pero esta tampoco es la mejor opción. Cuando se reduce el tamaño de la ventana, todas las capas se alinean en una fila verticalmente, y cuando se aumenta el tamaño, se adhieren al borde izquierdo de la ventana. Entonces necesitamos una mejor manera de centrar el div. Centrar capas

En el siguiente ejemplo, usaremos una capa contenedora en la que colocaremos el resto de elementos. Esto resuelve el problema de los bloques que se mueven entre sí cuando se cambia el tamaño de la ventana. Centrar el contenedor en el medio se realiza estableciendo las propiedades de margen en cero para los márgenes desde el borde superior y automático en los lados (margen: 0 auto):

#container (ancho: 600px; margen: 0 auto;) #left (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,51,102); ) #right (ancho: 200px; alto: 100px; float : izquierda; fondo: rgb(0,255,153); #center (ancho: 200px; alto: 100px; float: izquierda; fondo: rgb(255,0,0); ) Bloque izquierdo Bloque central Bloque derecho

El mismo ejemplo muestra cómo puedes centrar un div horizontalmente. Y si edita ligeramente el código anterior, puede lograr la alineación vertical de los bloques. Para hacer esto, solo necesita cambiar la longitud de la capa del contenedor (reducirla). Es decir, después de editar su clase CSS debería verse así:

Después del cambio, todos los bloques se alinearán estrictamente en una fila en el medio. Y su posición no cambiará independientemente del tamaño de la ventana del navegador. Así es como se ve centrar verticalmente un div:

En el siguiente ejemplo, utilizamos una serie de nuevas propiedades CSS para centrar capas dentro de un contenedor:

#container (ancho: 450px; alto:150px; margen:0 auto; color de fondo:#66CCFF; ) #left (ancho: 100px; alto: 100px; fondo: rgb(255,51,102); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;) #derecha (ancho: 100px; alto: 100px; fondo: rgb(0,255,153); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;) #center (ancho: 100px; alto: 100px; fondo: rgb(255,0,0); pantalla: bloque en línea; alineación vertical: medio; margen izquierdo: 35px;)

Una breve descripción de las propiedades CSS y sus valores que usamos en este ejemplo para centrar un div dentro de un div:

• display: inline-block: alinea un elemento de bloque en una línea y garantiza que se ajuste alrededor de otro elemento;
• vertical-align: middle: alinea el elemento en el medio en relación con el padre;
• margen izquierdo: establece el margen izquierdo.

Cómo hacer un enlace desde una capa

Por extraño que parezca, esto es posible. A veces, puede ser necesario un bloque div como enlace al diseñar varios tipos de menús. Veamos un ejemplo práctico de implementación de una capa de enlace:

#layer1( ancho: 500px; alto: 100px; fondo: rgb(51,255,204); borde: surco; ) a ( pantalla: bloque; alineación de texto: centro; alto: 100%; color: rgb(255,0,51) ; ) Enlace a nuestro sitio web

En este ejemplo, usando la línea display: block, configuramos el enlace al valor de un elemento de bloque. Y para que toda la altura del bloque div se convierta en un enlace, establezca la altura: 100%. Ocultar y mostrar elementos de bloque

Los elementos de bloque brindan más oportunidades para expandir la funcionalidad de la interfaz que el diseño tabular obsoleto. A menudo sucede que el diseño del sitio web es único y reconocible. Pero por algo tan exclusivo hay que pagar con falta de espacio libre.

Esto es especialmente cierto en el caso de la página principal, cuyo coste de publicidad es el más alto. Por tanto, surge el problema de dónde “empujar” otro banner publicitario. ¡Y aquí no puedes salirte con la tuya alineando el div con el centro de la página!

Una solución más racional es ocultar algún bloque. Aquí hay un ejemplo simple de tal implementación:

#capa1( pantalla:bloque; ancho: 500px; alto: 100px; fondo: rgb(51,255,204); borde:groove; ) función mostrar() ( if(capa1=="ninguno") ( capa1="bloque"; ) else ( capa1="ninguno"; ) document.getElementById("capa1").style.display=capa1 )

Este es el botón mágico. Al hacer clic en él, se ocultará o mostrará el bloque oculto.

Centrar elementos verticalmente usando CSS es una tarea que presenta cierta dificultad para los desarrolladores. Sin embargo, existen varios métodos para solucionarlo, que son bastante sencillos. Esta lección presenta 6 opciones para centrar contenido verticalmente.

Comencemos con una descripción general del problema.

Problema de centrado vertical

El centrado horizontal es muy sencillo y fácil. Cuando el elemento centrado está en línea, usamos la propiedad de alineación relativa al elemento principal. Cuando el elemento está a nivel de bloque, configuramos su ancho y la configuración automática de los márgenes izquierdo y derecho.

La mayoría de las personas, cuando utilizan la propiedad text-align:, se refieren a la propiedad vertical-align para el centrado vertical. Todo parece bastante lógico. Si ha utilizado plantillas de tablas, probablemente haya hecho un uso extensivo del atributo valign, lo que refuerza la creencia de que la alineación vertical es la forma correcta de resolver el problema.

Pero el atributo valign sólo funciona en las celdas de la tabla. Y la propiedad de alineación vertical es muy similar. También afecta a las celdas de la tabla y a algunos elementos en línea.

El valor de la propiedad de alineación vertical es relativo al elemento en línea principal.

• En una línea de texto, la alineación es relativa a la altura de la línea.
• La celda de la tabla utiliza alineación relativa a un valor calculado mediante un algoritmo especial (normalmente la altura de la fila).

Pero desafortunadamente, la propiedad de alineación vertical no funciona en elementos a nivel de bloque (por ejemplo, párrafos dentro de un elemento div). Esta situación puede llevar a pensar que no existe solución al problema del alineamiento vertical.

Pero existen otros métodos para centrar elementos de bloque, cuya elección depende de lo que se centra en relación con el contenedor exterior.

Método de altura de línea

Este método funciona cuando desea centrar una línea de texto verticalmente. Todo lo que tienes que hacer es configurar la altura de la línea para que sea mayor que el tamaño de fuente.

De forma predeterminada, el espacio en blanco se distribuirá uniformemente en la parte superior e inferior del texto. Y la línea quedará centrada verticalmente. A menudo, la altura de la línea se iguala a la altura del elemento.

HTML:

Texto requerido

CSS:

#niño (altura de línea: 200px;)

Este método funciona en todos los navegadores, aunque sólo se puede utilizar para una línea. El valor 200 px en el ejemplo se eligió arbitrariamente. Puede utilizar cualquier valor mayor que el tamaño de fuente del texto.

Centrar una imagen usando la altura de línea

¿Qué pasa si el contenido es una imagen? ¿Funcionará el método anterior? La respuesta está en una línea más de código CSS.

HTML:

CSS:

#parent (altura de línea: 200px;) #parent img (alineación vertical: medio;)

El valor de la propiedad line-height debe ser mayor que la altura de la imagen.

Método de tabla CSS

Se mencionó anteriormente que la propiedad de alineación vertical se usa para celdas de tablas, donde funciona muy bien. Podemos mostrar nuestro elemento como una celda de tabla y usar la propiedad de alineación vertical para centrar verticalmente el contenido.

Nota: una tabla CSS no es lo mismo que una tabla HTML.

HTML:

Contenido

CSS:

#parent (pantalla: tabla;) #child (pantalla: tabla-celda; alineación vertical: medio;)

Configuramos la salida de la tabla en el elemento div principal y generamos el elemento div anidado como una celda de la tabla. Ahora puede utilizar la propiedad de alineación vertical en el contenedor interior. Todo en él estará centrado verticalmente.

A diferencia del método anterior, en este caso el contenido puede ser dinámico ya que el elemento div cambiará de tamaño según su contenido.

La desventaja de este método es que no funciona en versiones anteriores de IE. Debe utilizar la propiedad display: inline-block para el contenedor anidado.

Posicionamiento absoluto y márgenes negativos

Este método también funciona en todos los navegadores. Pero requiere que al elemento que se centra se le dé una altura.

El código de ejemplo realiza el centrado horizontal y vertical al mismo tiempo:

HTML:

Contenido

CSS:

#parent (posición: relativa;) #child ( posición: absoluta; arriba: 50%; izquierda: 50%; altura: 30%; ancho: 50%; margen: -15% 0 0 -25%; )

Primero, configuramos el tipo de posicionamiento del elemento. A continuación, configuramos las propiedades superior e izquierda del elemento div anidado al 50%, que corresponde al centro del elemento principal. Pero el centro es la esquina superior izquierda del elemento anidado. Por lo tanto, debe levantarlo (la mitad de la altura) y moverlo hacia la izquierda (la mitad del ancho), y luego el centro coincidirá con el centro del elemento padre. Por lo que en este caso es necesario conocer la altura del elemento. Luego configuramos el elemento con márgenes superior e izquierdo negativos iguales a la mitad de la altura y el ancho, respectivamente.

Este método no funciona en todos los navegadores.

Posicionamiento absoluto y estiramiento.

El código de ejemplo realiza un centrado vertical y horizontal.

HTML:

Contenido

CSS:

#parent (posición: relativa;) #child ( posición: absoluta; arriba: 0; abajo: 0; izquierda: 0; derecha: 0; ancho: 50%; alto: 30%; margen: automático; )

La idea detrás de este método es extender el elemento anidado a los 4 bordes del elemento principal estableciendo las propiedades superior, inferior, derecha e izquierda en 0.

Configurar el margen para que se genere automáticamente en todos los lados establecerá valores iguales en los 4 lados y centrará nuestro elemento div anidado en su elemento principal.

Desafortunadamente, este método no funciona en IE7 y versiones inferiores.

Espacios iguales arriba y abajo

En este método, el relleno igual se establece explícitamente en la parte superior e inferior del elemento principal.

HTML:

Contenido

CSS:

#padre (relleno: 5% 0; ) #niño (relleno: 10% 0; )

El código CSS de ejemplo establece el relleno superior e inferior para ambos elementos. Para un elemento anidado, configurar el relleno servirá para centrarlo verticalmente. Y el relleno del elemento principal centrará el elemento anidado dentro de él.

Se utilizan unidades de medida relativas para cambiar el tamaño de los elementos dinámicamente. Y para unidades de medida absolutas tendrás que hacer cálculos.

Por ejemplo, si el elemento principal tiene una altura de 400 px y el elemento anidado es de 100 px, entonces se necesitan 150 px de relleno en la parte superior e inferior.

150 + 150 + 100 = 400

Usar % le permite dejar los cálculos al navegador.

Este método funciona en todas partes. La desventaja es la necesidad de realizar cálculos.

Nota: Este método funciona configurando el relleno exterior del elemento. También puedes utilizar márgenes dentro de un elemento. La decisión de utilizar márgenes o relleno debe tomarse dependiendo de las características específicas del proyecto.

div flotante

Este método utiliza un elemento div vacío que flota y ayuda a controlar la posición de nuestro elemento anidado en el documento. Tenga en cuenta que el div flotante se coloca antes de nuestro elemento anidado en el código HTML.

HTML:

Contenido

CSS:

#parent (alto: 250px;) #floater ( float: izquierda; alto: 50%; ancho: 100%; margen inferior: -50px; ) #child ( claro: ambos; alto: 100px; )

Desplazamos el div vacío hacia la izquierda o hacia la derecha y establecemos su altura al 50% de su elemento principal. De esta manera llenará la mitad superior del elemento padre.

Dado que este div es flotante, se elimina del flujo normal del documento y necesitamos desenvolver el texto en el elemento anidado. El ejemplo usa clear: Both , pero es suficiente usar la misma dirección que el desplazamiento de un elemento div flotante vacío.

El borde superior de un elemento div anidado está directamente debajo del borde inferior de un elemento div vacío. Necesitamos mover el elemento anidado hacia arriba la mitad de la altura del elemento vacío flotante. Para resolver el problema, utilice un valor de propiedad de margen inferior negativo para un elemento div flotante vacío.

Este método también funciona en todos los navegadores. Sin embargo, su uso requiere un elemento div vacío adicional y conocimiento de la altura del elemento anidado.

Conclusión

Todos los métodos descritos son fáciles de usar. La dificultad es que ninguno de ellos es adecuado para todos los casos. Es necesario analizar el proyecto y elegir el que mejor se adapte a los requisitos.

Hay varias formas fundamentalmente diferentes de centrar un objeto verticalmente usando CSS, pero elegir la correcta puede resultar complicado. Consideraremos algunos de ellos y también crearemos un pequeño sitio web utilizando los conocimientos adquiridos.

La alineación central vertical no es fácil de lograr usando CSS. Hay muchas formas y no todas funcionan en todos los navegadores. Veamos 5 métodos diferentes y los pros y los contras de cada uno. Ejemplo.

1er método

Este método supone que configuramos algún elemento para que se muestre como una tabla, luego podemos usar la propiedad de alineación vertical en él (que funciona de manera diferente en diferentes elementos).

Alguna información útil que conviene centrar.

#wrapper( pantalla: tabla; ) #cell( pantalla: tabla-celda; alineación vertical: medio; )

• Ventajas
• El contenido puede cambiar la altura dinámicamente (la altura no está definida en CSS).

El contenido no se corta si no hay suficiente espacio para ello.

• Contras
• No funciona en IE 7 o menos

Muchas etiquetas anidadas

2do método

Este método utiliza el posicionamiento absoluto del div, con la parte superior establecida en 50% y el margen superior menos la mitad de la altura del contenido. Esto implica que el objeto debe tener una altura fija, que se define en los estilos CSS.

Como la altura es fija, puedes configurar overflow:auto; para un div que contiene contenido, por lo tanto, si el contenido no encaja, aparecerán barras de desplazamiento.

#wrapper( pantalla: tabla; ) #cell( pantalla: tabla-celda; alineación vertical: medio; )

• Contenido aquí #content ( posición: absoluta; superior: 50%; altura: 240 px; margen superior: -120 px; /* menos la mitad de la altura */ )
• Funciona en todos los navegadores.

El contenido no se corta si no hay suficiente espacio para ello.

• No hay anidamientos innecesarios.

Cuando no hay suficiente espacio, el contenido desaparece (por ejemplo, el div está dentro del cuerpo y el usuario ha hecho las ventanas más pequeñas, en cuyo caso las barras de desplazamiento no aparecerán.

3er método

En este método, envolveremos el div de contenido con otro div. Establezcamos su altura al 50% (altura: 50%;), y el margen inferior a la mitad de la altura (margen-abajo:-contentheight;). El contenido flotará y quedará centrado.

#wrapper( pantalla: tabla; ) #cell( pantalla: tabla-celda; alineación vertical: medio; )

• Contenido aquí #content ( posición: absoluta; superior: 50%; altura: 240 px; margen superior: -120 px; /* menos la mitad de la altura */ )
• aquí está el contenido #floater( float: izquierda; altura: 50%; margen inferior: -120px; ) #content( claro: ambos; altura: 240px; posición: relativa; )

El contenido no se corta si no hay suficiente espacio para ello.

• Cuando no hay suficiente espacio (por ejemplo, cuando se reduce la ventana), el contenido no se recorta y aparecerán barras de desplazamiento.

Sólo se me ocurre una cosa: que se está utilizando un elemento vacío extra.

Cuarto método.

Este método utiliza la propiedad position:absolute; para un div con dimensiones fijas (ancho y alto). Luego establecemos sus coordenadas top:0; abajo: 0; , pero como tiene una altura fija, no se puede estirar y está alineado al centro. Esto es muy similar al conocido método de centrar horizontalmente un elemento de bloque de ancho fijo (margen: 0 auto;).

#wrapper( pantalla: tabla; ) #cell( pantalla: tabla-celda; alineación vertical: medio; )

• Información importante.

El contenido no se corta si no hay suficiente espacio para ello.

• #content( posición: absoluta; arriba: 0; abajo: 0; izquierda: 0; derecha: 0; margen: automático; alto: 240px; ancho: 70%; )
• Muy sencillo.

No funciona en Internet Explorer

Con este método, puede centrar y alinear una línea de texto. Simplemente establecemos la altura del texto (altura de línea) igual a la altura del elemento (altura). Después de esto, la línea se mostrará en el centro.

Alguna línea de texto #content( altura: 100px; altura de línea: 100px; )

#wrapper( pantalla: tabla; ) #cell( pantalla: tabla-celda; alineación vertical: medio; )

• Contenido aquí #content ( posición: absoluta; superior: 50%; altura: 240 px; margen superior: -120 px; /* menos la mitad de la altura */ )
• No corta el texto si no encaja.

El contenido no se corta si no hay suficiente espacio para ello.

• Funciona sólo con texto (no funciona con elementos de bloque).
• Si hay más de una línea de texto, se ve muy mal.

Este método es muy útil para elementos pequeños, como centrar texto en un botón o campo de texto.

Ahora que sabes cómo lograr la alineación central vertical, creemos un sitio web simple que terminará luciendo así:

Paso 1

Siempre es bueno comenzar con el marcado semántico. Nuestra página estará estructurada de la siguiente manera:

• #floater (para centrar el contenido)
• #centrado (elemento central)
  • #lado
    • #logo
    • #nav (lista
    • #contenido
  • #bottom (para derechos de autor y todo eso)

  Escribamos el siguiente marcado html:

  Una empresa centrada Una empresa

  • Hogar
  • Productos
  • Blog
  • Contacto
  • Acerca de
  Título de la página

  Reingeniería integral de la subcontratación de valor agregado después de la colaboración centrada en los procesos y el intercambio de ideas.

  Simplifique enérgicamente nichos de mercado impactantes a través de imperativos habilitados. Predomina holísticamente la innovación premium tras escenarios convincentes. Recaptiualizar sin problemas los altos estándares en capital humano con productos manufacturados de vanguardia. Distribuya de manera distintiva esquemas que cumplan con los estándares antes de vortales robustos. Recaptiualice de manera única la preparación web aprovechada frente a la información lista para usar.

  Título 2

  Adopte de manera eficiente la preparación web personalizada en lugar de procesos dirigidos al cliente. Desarrollar de manera asertiva los imperativos multiplataforma frente a las tecnologías proactivas. Potencie cómodamente metaservicios multidisciplinarios sin interfaces en toda la empresa.

  Optimice convenientemente las áreas temáticas estratégicas competitivas con mercados electrónicos enfocados. Sindicar de manera fosffluorescente comunidades de clase mundial frente a mercados de valor agregado. Reinventar adecuadamente los servicios holísticos antes que los servicios electrónicos sólidos.

  El aviso de derechos de autor va aquí.

  HTML, cuerpo (margen: 0; relleno: 0; altura: 100%;) cuerpo (fondo: url("page_bg.jpg") 50% 50% sin repetición #FC3; familia de fuentes: Georgia, Times, serifas; ) #floater ( posición: relativa; flotante: izquierda; altura: 50%; margen inferior: -200px; ancho: 1px; ) #centered ( posición: relativa; claro: izquierda; altura: 400px; ancho: 80%; máximo -ancho: 800px; ancho mínimo: 400px; margen: 0 automático; borde: 4px sólido #666; ) #bottom (posición: absoluta; abajo: 0; derecha: 0; ) #nav (posición: absoluta; izquierda: 0 ; abajo: 0; relleno: 20px; #content (posición: absoluta; izquierda: 0; arriba: 0; abajo: 0; desbordamiento: automático; relleno: 20px;

  Antes de alinear nuestro centro de contenido, debemos establecer la altura del cuerpo y del html al 100%. Dado que la altura se calcula sin relleno interno y externo (relleno y margen), los configuramos (relleno) en 0 para que no haya barras de desplazamiento.

  El margen inferior de un elemento "flotante" es igual a menos la mitad de la altura del contenido (400 px), es decir, -200 px;

  Su página ahora debería verse así:

  

  #ancho del elemento centrado 80%. Esto hace que nuestro sitio sea más estrecho en pantallas pequeñas y más ancho en las más grandes. la mayoría de los sitios lucen indecentes en los nuevos monitores anchos en la esquina superior izquierda. Las propiedades de ancho mínimo y ancho máximo también limitan nuestra página para que no parezca ni demasiado ancha ni demasiado estrecha. Internet Explorer no admite estas propiedades. Debe configurarlo en un ancho fijo.

  Dado que el elemento #centered tiene una posición: conjunto relativo, podemos usar el posicionamiento absoluto de los elementos dentro de él. Luego configure overflow:auto; para el elemento #content para que aparezcan barras de desplazamiento si el contenido no encaja.

  Paso 3

  Lo último que haremos será agregar algo de estilo para que la página se vea un poco más atractiva. Empecemos por el menú.

  #nav ul (estilo de lista: ninguno; relleno: 0; margen: 20px 0 0 0; sangría de texto: 0; ) #nav li ( relleno: 0; margen: 3px; ) #nav li a ( display: block; color de fondo: #e8e8e8; margen: 0; borde inferior: 1px sólido: derecho; contenido: """; peso de fuente: negrita; flotante: derecho; margen: 0 2px 0 5px; f8f8f8; color del borde inferior : #777; ) #nav li a:hover::after ( margen: 0 0 0 7px; color: #f93; ) #nav li a:active ( relleno: 8px 7px 6px 7px; )

  Lo primero que hicimos para que el menú se viera mejor fue eliminar las viñetas configurando el atributo list-style:none, y también configurar el relleno y el relleno, ya que varían mucho de forma predeterminada en diferentes navegadores.

  Observe que luego especificamos que los enlaces deben representarse como elementos de bloque. Ahora, cuando se muestran, se extienden a lo largo de todo el ancho del elemento en el que se encuentran.

  Otra cosa interesante que usamos para el menú son las pseudoclases:antes y:después. Te permiten agregar algo antes y después de un elemento. Esta es una buena manera de agregar íconos o símbolos, como una flecha al final de cada enlace. Este truco no funciona en Internet Explorer 7 y versiones inferiores.

  

  Paso 4

  Y por último, pero no menos importante, agregaremos algunos tornillos a nuestro diseño para darle aún más belleza.

  #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familia de fuentes: Helvetica, Arial, sans- serif; peso de fuente: normal; color: #666; ) h1 (color: #f93; borde inferior: 1px sólido #ddd; espacio entre letras: -0,05 em; peso de fuente: negrita; margen superior: 0; padding-top: 0; ) #bottom ( relleno: 10px; tamaño de fuente: 0.7em; color: #f03; ) #logo ( tamaño de fuente: 2em; alineación de texto: centro; color: #999; ) #logo fuerte (peso de fuente: normal;) #logo span (pantalla: bloque; tamaño de fuente: 4em; altura de línea: 0,7em; color: #666;) p, h2, h3 (altura de línea: 1,6em;) un (color: #f03;)

  En estos estilos establecemos esquinas redondeadas para el elemento #centered. En CSS3, esto lo hará la propiedad border-radius. Esto aún no está implementado en algunos navegadores, aparte del uso de los prefijos -moz y -webkit para Mozilla Firefox y Safari/Webkit.

  

  Compatibilidad

  Como probablemente ya habrás adivinado, la principal fuente de problemas de compatibilidad es Internet Explorer:

  • El elemento #floater debe tener un ancho establecido
  • IE 6 tiene relleno adicional alrededor de los menús

  237152 vistas