admin
Centrar una imagen usando HTML y CSS puede ayudarlo a crear una sensación de simetría en su sitio web y atraer la atención de manera efectiva a los elementos más importantes de la página.
El problema: si no tiene 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 necesita saber sobre el centrado de imágenes (o cualquier elemento en línea) y lo guiaremos a través de varios tutoriales para principiantes. Al final, podrá centrar las imágenes con los ojos cerrados.
Aprenderás:
- Comprender HTML y CSS al centrar una imagen
- Cómo centrar una imagen horizontalmente
- Cómo centrar una imagen verticalmente
Consideraciones al centrar imágenes
Primero, ¿por qué debería centrar las imágenes, o cualquier otro elemento, en primer lugar? Los seres humanos anhelan la simetría dentro y fuera de línea. Esta preferencia es tan fuerte que en realidad es cableado en nuestro sistema nervioso y lo ha sido durante miles de años.
La simetría no significa que las cosas tengan que ser idénticas a ambos lados de un eje. Hay varias formas de crear simetría en un sitio web, y la que discutiremos en este artículo es el equilibrio.
Lograr el equilibrio en su sitio web depende en gran medida de la alineación de los elementos en una página. Centrar elementos, en particular elementos grandes como imágenes, puede ayudar a que su diseño se vea ordenado y agradable a la vista.
El proceso de centrado no es difícil, pero varía dependiendo de si los elementos están en línea o cuadra. Hay algunas diferencias entre estos tipos de elementos, pero la principal diferencia es cómo afectan el flujo de una página.
Centrado de elementos en línea frente a elementos de bloque
Los elementos de bloque funcionan interrumpiendo el flujo de una página, mientras que los elementos en línea funcionan siguiendo el flujo.
Los elementos de bloque comienzan en una nueva línea y ocupan todo el ancho de la ventana gráfica (o el ancho de la página). Los elementos en línea, por otro lado, ocupan el espacio asignado por sus etiquetas HTML, lo que les permite seguir el «flujo» de la página en lugar de interrumpirla. Por supuesto, el ancho y el estilo de estos elementos varían según el código CSS para esa etiqueta HTML.
He aquí un ejemplo para ayudar a visualizar estas diferencias.
A continuación, verá un botón Bootstrap diseñado como un elemento en línea y un elemento de bloque.
El botón en línea necesitaría un código especial para alinearse con el centro, mientras que el botón de bloque simplemente necesitaría algunos ajustes en el ancho o el relleno.
Tldr; Los elementos en bloque y en línea requieren diferentes métodos para alinearlos al centro. Por ejemplo, cuando centra un div (que es un elemento de bloque), puede usar margen y relleno u otros métodos.
Sin embargo, no puede utilizar estos métodos al centrar imágenes.
Eso es porque las imágenes son en línea elementos y seguir el flujo de la página. Al igual que el botón en línea anterior, necesitará un código especial para colocarlo en el centro de la página.
A continuación, veremos el proceso para centrar una imagen o cualquier elemento en línea en HTML y CSS. Este proceso funcionará ya sea que esté creando su sitio desde cero o utilizando un marco como Bootstrap CSS. Pero primero, cubramos algunos de los conceptos básicos de HTML y CSS.
Comprender HTML y CSS al centrar una imagen
Antes de discutir las diferentes formas de centrar una imagen, es importante aclarar qué significa realmente «en HTML». En otras palabras, ¿dónde agregaría el código de «centrado» para su imagen? ¿Justo dentro de la etiqueta ? ¿O tendría que ir directamente al código CSS de su sitio web? Vamos a ver.
Centrado de imágenes con la etiqueta obsoleta
Érase una vez un elemento HTML
<center><img src=" alt="centered image" height="598" width="398"> </center>
Sin embargo, este elemento quedó obsoleto en HTML4. Ahora que HTML5 es el estándar, es probable que esta etiqueta obsoleta no se reproduzca en ningún…
