wikipediaillustrated

marketing

Cómo centrar una imagen en HTML y CSS

Developer centering images in HTML.jpgkeepProtocol

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:

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.

Recurso destacado

La guía para principiantes de HTML

Rellene el formulario para su introducción gratuita a la guía HTML.




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.

cómo centrar una imagen en html: comparación en línea vs 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

. Este era un elemento a nivel de bloque que automáticamente centraba cualquier bloque o elemento en línea que contuviera. Entonces, centrar una imagen requeriría una sola línea de HTML que se viera así:

 

<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…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.