CSS es la mejor manera de centrar elementos, pero puede ser un reto para los diseñadores web principiantes porque hay muchas maneras de lograrlo. Este artículo explica cómo usar CSS para centrar texto, bloques de texto e imágenes.
Con esta línea de CSS, cada párrafo escrito con la clase .center se centrará horizontalmente dentro de su elemento padre. Por ejemplo, un párrafo dentro de una división (un hijo de esa división) se centraría horizontalmente dentro del
La legibilidad es siempre clave cuando se trata de texto de un sitio web. Los grandes bloques de texto justificados en el centro pueden ser difíciles de leer, así que utilice este estilo con moderación. Los titulares y los bloques de texto pequeños, como el texto de presentación de un artículo, suelen ser fáciles de leer cuando están centrados; sin embargo, los bloques de texto más grandes, como un artículo completo, serían difíciles de consumir si están totalmente justificados en el centro.
Esta abreviatura de CSS para la propiedad margin establecería los márgenes superior e inferior a un valor de 0, mientras que el izquierdo y el derecho usarían “auto”. Esto esencialmente toma cualquier espacio disponible y lo divide uniformemente entre los dos lados de la ventana de visualización, centrando efectivamente el elemento en la página.
Centering (horizontally and vertically) an image in a boxThe problemWe want to center an image inside a container, bigger than the image and with assigned dimensions. The image is not a background one, it’s a true <img> element.Any image has well defined dimensions, so the easiest and most reliable way to solve the problem is:For example if you have images of two different sizes, like in a photo gallery with “landscape” and “portrait” images, to be centered in fixed size containers, then assigning to each <img> one of two classes (with different margins) will solve the problem.But there are cases when one does not want to use the previous method. For example when many images, all with different dimensions are involved and it is not practical to assign different margins to each of them, or when the dimensions of the container and those of the image are not expressed in the same units (px, em, %, …) hence the difference cannot be computed. It’s useful to have a different solution, independent on the image’s size.
El problema: Si no tienes ninguna experiencia en codificación, alinear cualquier elemento con código HTML puede parecer una tarea difícil. En este artículo, cubriremos todo lo que necesitas saber sobre el centrado de imágenes (o cualquier elemento en línea) y te guiaremos a través de varios tutoriales para principiantes. Al final, serás capaz de centrar imágenes con los ojos cerrados.
En primer lugar, ¿por qué deberías centrar las imágenes, o cualquier otro elemento, en primer lugar? Los seres humanos anhelan la simetría dentro y fuera de la red. Esta preferencia es tan fuerte que, de hecho, está programada en nuestro sistema nervioso y así ha sido durante miles de años.
Lograr el equilibrio en su sitio web depende en gran medida de la alineación de los elementos en una página. Centrar los elementos, sobre todo los grandes, como las imágenes, puede ayudar a que el diseño sea ordenado y visualmente agradable.
El proceso de centrado no es difícil, pero varía dependiendo de si los elementos están en línea o en bloque. Hay algunas diferencias entre estos tipos de elementos, pero la principal es cómo afectan al flujo de una página.
La posición absoluta en combinación con el margen automático permite centrar un elemento horizontal y verticalmente. La posición del elemento puede basarse en la posición de un elemento padre utilizando el posicionamiento relativo. Resultado de la vista
Esto sólo funciona porque se conocen las dimensiones tanto de la imagen como del div que la contiene. Esto también le permitirá tener otros elementos dentro del div contenedor… donde las soluciones como el uso de la altura de la línea no.
He encontrado que las respuestas de Valamas y Lepu arriba son las respuestas más directas que tratan con imágenes de tamaño desconocido, o de tamaño conocido que prefieres no codificar en tu CSS. Yo sólo tengo unos pequeños ajustes: eliminar los estilos irrelevantes, dimensionar a 200px para que coincida con la pregunta, y añadir max-height/max-width para manejar las imágenes que pueden ser demasiado grandes.
Haciendo una combinación de ajustes de altura de línea en el contenedor y usando vertical-align:middle en el elemento imagen, finalmente conseguí que funcionara en FF 3.5, Safari 4.0 e IE7.0 usando el siguiente marcado HTML y el siguiente CSS.