Centrar una imagen con HTML y CSS puede ayudar a crear una sensación de simetría en su sitio y enfocar su atención de manera efectiva en los elementos más importantes de la página.
Problema: si eres nuevo en la codificación, alinear cualquier elemento con el HTML puede parecer una tarea abrumadora. En este artículo, cubriremos todo lo que necesita saber sobre el centrado de imágenes (o cualquier elemento integrado) y lo guiaremos a través de algunos tutoriales para principiantes. Al final, podrás centrar las imágenes con los ojos cerrados.
Aprenderás:
Notas sobre el centrado de imágenes
En primer lugar, ¿por qué centrar las imágenes en primer lugar, o cualquier otro elemento? La gente anhela la simetría en línea y fuera de línea. Esta preferencia es tan fuerte que en realidad es permanentemente 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 en ambos lados del eje. Hay varias formas de crear simetría en un sitio web y de la que hablaremos en este artículo es el equilibrio.
Lograr el equilibrio en su sitio depende en gran medida de la alineación de los elementos de la página. Centrar elementos, especialmente elementos grandes como imágenes, puede hacer que su diseño se vea estructurado y visualmente agradable.
El proceso de centrado no es difícil, pero varía dependiendo de si los elementos están o no. incorporado o Unidad. Existen algunas diferencias entre estos tipos de elementos, pero la diferencia principal es cómo afectan el flujo de su página.
Centrado de elementos empotrados y de bloque.
Los elementos de bloque funcionan interrumpiendo el flujo de la 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 interrumpirlo. Por supuesto, el ancho y el estilo de estos elementos varían según el código CSS para esa etiqueta HTML.
Aquí hay 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.
Un botón incorporado requeriría un código especial para estar centrado, mientras que un botón de bloque solo necesitaría algunos ajustes de ancho o relleno.
Tldr; Los elementos en bloque y en línea requieren diferentes métodos para centrarlos. Por ejemplo, cuando centra el div (que es un elemento de bloque), puede usar márgenes y relleno u otros métodos.
Sin embargo, no puede utilizar estos métodos al centrar imágenes.
Esto es porque las imágenes están ahí. incorporado elementos y siga el flujo de su página. Al igual que con el botón integrado de arriba, necesitará un código especial para colocarlo en el centro de la página.
A continuación, analizaremos el proceso de centrar una imagen o cualquier elemento integrado 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 conceptos básicos de HTML y CSS.
Aprende más: Una guía para principiantes de HTML y CSS
¿Quieres saber más sobre HTML? Descarga nuestra guía gratuita para conocer las mejores prácticas para comenzar con HTML.
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 un código de «centrado» a su imagen? En la propia etiqueta ? ¿O tal vez tendrías que ir directamente al código CSS de tu sitio web? Echemos un vistazo.
Centrado de imágenes con el marcador en desuso
Érase una vez un elemento HTML
<center><img src="https://blog.hubspot.com/website/image1.jpg" alt="centered image" height="598" width="398"> </center>
Sin embargo, este elemento ha quedado obsoleto en HTML4. Ahora que HTML5 es el estándar, es poco probable que esta etiqueta obsoleta se represente en cualquier navegador moderno.
Entonces, ¿cuál es el proceso de centrado de imágenes en HTML? Lo más importante que debe comprender es que centrar la imagen requerirá que agregue CSS a su HTML. Ya no puedes usar solo código HTML.
Centrar imágenes con CSS
Debes usar CSS para centrar la imagen. Tienes varias opciones: CSS interno, CSS externo o CSS incorporado.
El CSS interno se coloca en la sección
sitio web, mientras que el CSS externo está en una hoja de estilo externa, que luego se vincula a una sección. Por otro lado, el CSS incorporado está incrustado en el HTML en la sección. CSS se define en el atributo «estilo» del destino.Generalmente se recomienda mantener su código HTML separado de su CSS, pero cualquier método producirá el mismo resultado. Si por alguna razón no puede separarlos, por ejemplo, la plataforma de desarrollo web que está utilizando los mantiene juntos en un editor de código fuente, tendrá que usar el CSS incorporado.
La buena noticia es que la sintaxis del CSS incorporado es similar a la sintaxis del CSS interno y externo. La propiedad recibe un nombre y se le asigna un valor, pero el conjunto de reglas se incluye entre comillas simples, no entre paréntesis.
Aquí hay un ejemplo de cómo funciona el CSS incorporado. Suponga que desea cambiar el color del texto del primer encabezado de una página y dejar los demás sin cambios. Establece la propiedad de color en su código de color hexadecimal preferido, lo coloca en el atributo de estilo y lo coloca todo dentro de una etiqueta H2.
Compruébalo a continuación:
ver la pluma Un ejemplo de CSS incorporado por HubSpot (@hubspot) en CódigoPen.
¿Cómo se relaciona esto con el CSS interno? Digamos que quieres usar el mismo CSS pero ponlo en la sección principal entre las etiquetas.