Alinear img verticalmente css. Bloques DIV de centrado CSS: horizontal y vertical
En el proceso de diseño de una página web, la tarea de centrar bloques es bastante común. Este puede ser un centrado vertical u horizontal.
Por ejemplo, si el sitio tiene un ancho fijo, sería racional alinearlo en el centro de la ventana del navegador, porque esto hace que el texto sea más fácil de leer (especialmente si el monitor es grande). Algunos diseños generalmente implican colocar el bloque en el centro de la ventana del navegador, es decir, centrado tanto vertical como horizontal.
Primero, hablemos del centrado horizontal. La técnica más popular es centrar el bloque estableciendo las dimensiones de la derecha y la izquierda. margen a "automático". Digamos que queremos centrar un bloque con id = "contenedor" y un ancho de 860 px. En este caso, en el archivo CSS debes escribir:
#contenedor (
color de fondo: #EEE;
ancho: 860 px;
margen: 0px automático;
}
Sin embargo, es decir. Las versiones anteriores (5.0 por ejemplo) no alinearán este bloque centrado. Por supuesto, ya nadie usa navegadores tan antiguos (de mis 1800 visitantes diarios, solo 1), pero por si acaso, es mejor hacerlo funcionar allí también :)
Para hacer esto, el elemento padre, es decir, aquel dentro del cual centramos nuestro bloque (generalmente el elemento padre es la etiqueta BODY), necesita configurar el parámetro alineación de texto: centro. En este caso, el bloque estará alineado al centro, pero todo su contenido también estará alineado al centro, pero no lo necesitamos. Por lo tanto, dentro de este bloque configuramos la alineación predeterminada: alineación de texto: izquierda .
cuerpo (alineación de texto: centro)
#contenedor (
color de fondo: #EEE;
ancho: 860 px;
margen: 0px automático;
alineación de texto: izquierda;
}
También hay otra forma de alinear horizontalmente un bloque, basada en . Como probablemente sepa, de forma predeterminada, cualquier elemento de bloque se presiona en el borde izquierdo del elemento principal. Por lo tanto, para alinearlo al centro necesitas:
2. Muévalo hacia la derecha el 50% del ancho de la ventana del navegador.
3. Usando relleno negativo, muévalo hacia la izquierda una distancia igual a la mitad del ancho del bloque.
De esta forma el bloque quedará centrado. Para mayor claridad, mire el video a continuación:
Ejemplo de código CSS:
#contenedor (
color de fondo:#559964;
posición:absoluta;
izquierda: 50%;
margen izquierdo: -430px;
ancho: 860 px;
}
Cabe señalar que si desea colocar un bloque no en relación con la ventana del navegador, sino, por ejemplo, en relación con otro bloque, entonces para este otro bloque debe configurar posición: relativa;
Digamos que nuestro bloque #container, que necesita estar centrado, se encuentra dentro del bloque #wrap. Entonces el código se verá así:
#wrap(posición:relativa)
#contenedor (
color de fondo:#559964;
posición:absoluta;
izquierda: 50%;
margen izquierdo: -430px;
ancho: 860 px;
}
Ahora veamos el caso en el que necesita alinear un bloque con el centro de la página, es decir. Aplicar centrado horizontal y vertical simultáneamente. Aquí el posicionamiento vuelve a entrar en juego. Entonces necesitamos:
1. Configure el bloque en posicionamiento absoluto.
2. Muévalo hacia la derecha un 50% y hacia abajo un 50%, colocando así su esquina superior izquierda en el centro de la ventana del navegador.
3. Usando relleno negativo, muévalo hacia arriba una distancia igual a la mitad de la altura del bloque y hacia la izquierda una distancia igual a la mitad del ancho del bloque.
Esto colocará el bloque en el centro de la página web.
Digamos que la altura de nuestro bloque es de 600 px y el ancho es de 860 px. Entonces el código CSS se verá así:
#contenedor (
color de fondo:#559964;
posición:absoluta;
arriba: 50%;
izquierda: 50%;
margen superior: -300px;
margen izquierdo: -430px;
altura: 600 px;
ancho: 860 px;
}
Espero que el principio en sí sea claro para usted.
Comentarios:
¡¡¡Seré el primero en ver la lección!!!
Eh... Segundo =) Recientemente encontré este problema en IE, lo sufrí durante mucho tiempo)) Gracias =)
Gracias, página marcada como favorita)))
¡Muchas gracias Andrey por las nuevas lecciones!
Solo gracias, no creo que haya nada que agregar aquí))
Gracias por la lección, literalmente intenté hacer esto hace un par de días, sufrí un poco y lo dejé de lado temporalmente.
Pero tengo un problema: el sitio en Mozille Firefox no quiere alinearse, se queda pegado al borde izquierdo y listo, nada de lo anterior ayuda (lo mismo en Opera).
¿Por qué esto no funciona? - "si desea posicionar un bloque no en relación con la ventana del navegador, sino, por ejemplo, en relación con otro bloque, para este otro bloque debe establecer la posición: relativa;"
¡¡Muchas gracias!! simplemente un GIGANTE de gracias!
Todo está bien, pero por alguna razón todas las imágenes aparecen en su lugar solo después de actualizar el navegador. ¿Por favor dime por qué sucede esto?
Andrey, agregue una búsqueda en el sitio.
Añade un comentario.
Al crear bloques div, probablemente te hayas encontrado con situaciones en las que necesitas centrar tu div horizontal y verticalmente usando CSS puro. Por ejemplo, al crear ventanas emergentes con . Hay varias formas de implementar el centrado y en este artículo compartiré mis formas favoritas y más sencillas, usando CSS o jQuery.
Primero, lo básico:
Centrado horizontal en CSS
Esto es fácil de hacer, usamos margen para nuestro div bloquear.
Nombre de clase( margen:0 automático; ancho:200px; alto:200px; )
Para centrar un bloque div solo horizontalmente, debe determinar el ancho del bloque (width), use la propiedad auto para márgenes izquierda y derecha. Este método funcionará para todos los elementos del bloque (div, p, h1, etc.). Para aplicar centrado horizontal a elementos en línea (enlaces, imágenes...), es necesario aplicar el parámetro mostrar:bloquear;
Centrado horizontal y vertical en CSS
Centrar un bloque div horizontal y verticalmente al mismo tiempo es un poco más complicado. Necesita conocer las dimensiones del bloque div de antemano.
Nombre de clase( ancho:300px; alto:200px; posición:absoluta; izquierda:50%; arriba:50%; margen:-100px 0 0 -150px; )
Al usar absoluto Al posicionar un bloque, podemos separarlo de los elementos circundantes y determinar su posición en relación con el tamaño de la ventana del navegador. Mueva el bloque div a 50% a la izquierda y en la parte superior de la ventana. La esquina superior izquierda del bloque ahora está en el centro de la ventana del navegador. Todo lo que queda es instalar el bloque div en el centro de la página moviéndolo a la mitad de su ancho izquierda y la mitad de su altura arriba. ¡Hurra! El resultado fue un excelente centrado de bloques utilizando código CSS puro.
Centrado horizontal y vertical con jQuery
Como se mencionó anteriormente, el método de centrado CSS solo funciona con dimensiones fijas. Si las dimensiones no están definidas, el método jQuery vendrá al rescate:
$(ventana).resize(function())( $(".className").css(( posición:"absoluta", izquierda: ($(window).width() - $(".className").outerWidth ( ))/2, arriba: ($(ventana).height() - $(".className").outerHeight())/2 )); // Para ejecutar la función cuando la ventana está cargada: $(window).resize();
El funcionamiento de este método es ejecutar la función resize() usando la línea $(ventana).redimensionar(). Esta función funciona siempre que se cambia el tamaño de la ventana del navegador. Usamos ancho exterior() Y altura exterior(), porque en contraste ancho() Y altura(), incluyen relleno y grosor del borde en el tamaño que devuelven. La última línea inicia el proceso de centrar el bloque div cuando se carga la página.
La ventaja de utilizar este método es que es posible que no sepas qué tamaño tiene el div. El principal inconveniente es que sólo funciona cuando JavaScript está habilitado. Por tanto, este método es aceptable para interfaces multifuncionales como VKontakte, Facebook, etc.
Como siempre, puedes sugerir tu método favorito para centrar bloques comentando.Alinear elementos en una página web puede ser una tarea desafiante, especialmente cuando se trata de alinear 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 de las hojas de estilo en cascada CSS. Ya que todo esto se hace según sus reglas.
La alineación vertical del texto se puede lograr al menos de cinco maneras diferentes. 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 tiene un gran inconveniente que limita su aplicación. Pero aún así, digan lo que digan, puede ser útil e incluso producir el resultado deseado. Esta será una alineación condicional, ya que 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
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 exterior, si lo hay */ text-align:center;/* alinear el texto horizontalmente con el centro */ padding: 0;/* eliminar el relleno interior, si lo hay */ ) /* end N° 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
Ejemplo. Demostración n.° 2/* No.2 */ .talign2( border: 1px solid red; line-height:200px;/* bloquear la altura de la línea */ ) .talign2 div( text-align:center;/* alinear elementos horizontalmente en el centro */ ) .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 un valor negativo para los 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 obligatorio conocer la altura y el ancho exactos del 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í utilizamos una técnica antigua, convirtiendo los elementos en una tabla con celdas. En este caso, las etiquetas de la tabla
|
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 |
Ejemplo 3: Aplicar estilos para la alineación
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.
 |
(18.6) |
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.
Ejemplo 4: alineación de fórmulas
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).
Ejemplo 5: Alinear campos de formulario
En este ejemplo, para aquellas celdas donde se requiere alineación correcta, se agrega el atributo align="right".
