Cargando



Cómo centrar una imagen con HTML y CSS

Tutorial para centrar y alinear una imagen en una página web usando HTML, CSS y Bootstrap.


jun 11 2019 17:50
Intermedio
Total de Apartados : 3
jun 11 2019 17:52

En este tutorial vamos a ver cómo centrar imágenes con HTML y CSS. No es nada complicado y lo vamos a necesitar a menudo para nuestras páginas web. Vamos a ver unas opciones, una que solo utilizamos HTML, otra a través del uso de CSS y por último usando Bootstrap.

 

HTML y CSS son dos lenguajes protagonistas de script web protagonistas en el mundo de la creación de páginas y aplicaciones web. Ambos lenguajes trabajan de forma conjunta en esta tarea. Mientras HTML da una estructura a las páginas web, CSS se encarga del estilo y de la parte visual o auditiva. HTML aporta etiquetas que envuelven a los diferentes elementos de una página y de esta forma junto con atributos, iremos creando el esqueleto de nuestra web.

 

Diferencias entre HTML y CSS
Para resumir podremos ver las diferencias entre HTML y CSS como las siguientes:
  • HTML es más fácil de aprender e implementar
  • HTML Disponible en múltiples idiomas
  • HTML es ligero y efectivo
  • HTML tiene una seguridad limitada
  • HTML es algo lento.
  • CSS tiene una biblioteca de atributos y estilos más grande que CSS
  • CSS mejora el tiempo de carga de las páginas.
  • CSS tiene gran compatibilidad y fácil mantenimiento.
  • CSS da algunos problemas de rendimiento
  • CSS no tiene seguridad integrada

 

 

Lo recomendable a día de hoy es realizar los pasos directamente con CSS pero si eres más de HTML puedes contar con las siguientes opciones también.

 


1. Cómo centrar imagen en página web usando solo HTML


Aunque realizar estas opciones de centrar imagen con HTML vamos a ver dos formas de realizarlo fácilmente.

 

Centrar imagen con HTML y etiqueta center
En esta opción simple basta con envolver a la imagen con las etiquetas center
<center>
	 <img src="solvetic.png" alt="Descripción de la imagen">
</center>
  • La parte “src” sirve para indicar cuál es la dirección de ruta de la imagen.
  • La parte alt da información a la página web sobre el nombre de la imagen.

 

Además, debemos de asignar una altura y ancho de la imagen así:

<center>
	 <img src="solvetic.png" alt="Descripción de la imagen"> height=”250” width=200”
</center>

 

Centrar imagen con HTML y middle
Pero con respecto a las imágenes este concepto de center que hemos visto difiere y es que es mejor usar una alineación de middle, por lo que el código se queda de la siguiente forma:
	 <img src="solvetic.png" alt="Descripción de la imagen"> align=”middle”>
Si además agregamos texto tendríamos este código:
<p> Este ejemplo será para centrar una imagen con texto en HTML. <img src="solvetic.png" alt="Descripción de la imagen"> align=”middle”> Ahora acabamos nuestro texto de ejemplo. </p>

 

Alinear imagen con HTML con atributo align
Si queremos alinear una imagen de forma horizontal podremos hacerlo de forma similar a lo que hacemos con el texto, es decir, utilizar el atributo align dentro de etiquetas <p> o <div>. Crearemos el código donde aparezca el atributo con la etiqueta imagen. La etiqueta <image> es una de las que acepta el atributo align pero el uso es diferente.
<div align="center"><img src="fondosolvetic.png"></div>
Pero como decimos , la etiqueta <img> puede usar el atributo de align aunque su uso será diferente. Este atributo podrá ser usado para que justifiquemos la imagen a la derecha o a la izquierda rellenando el espacio vacío con texto. Es una forma de envolver o embeber la imagen en el texto. Para ello usaremos un código similar a este:
<p>
<img src="fondosolvetic.png" align="left">Aquí pondríamos el texto que iría rellenando toda la parte derecha y envolviendo a la imagen que hemos colocado. Seguimos rellenando el texto solvetic solvetic solvetic
</p>

1-Cómo-centrar-una-imagen-con-HTML-y-CSS.png

 

 

Haremos lo mismo para alinearlo en la parte izquierda el texto e imagen a la derecha, pero sustituyendo “left” por “right”.

<p>
<img src="fondosolvetic.png" align="right">Aquí pondríamos el texto que iría rellenando toda la parte derecha y envolviendo a la imagen que hemos colocado. Seguimos rellenando el texto solvetic solvetic solvetic
</p>

 

No es recomendable, porque los aspectos de colocación y de estilo debemos dejarlo para CSS y no usarlas directamente en HTML. De este modo tendremos un código más fácil de mantener y cambiar, pero si en un momento dado lo necesitas para una pequeña y rápida prueba no está de más saberlo.

 


2. Cómo centrar una imagen en página web con CSS


Aquí tendremos código HTML y código CSS. Empezamos viendo el HTML.
<img class="centrado" src="solvetic.png" alt="Solvetic">
Hemos puesto una clase a la imagen, llamada centrado, y que nos servirá para luego darle estilo en el CSS. A continuación, está el código para centrar la imagen.
   .centrado{
		    margin:10px auto;
		    display:block;
    }
También podemos usar el siguiente código para alinear una imagen usando CSS para nuestra página web:
.centrado{
  margin-left: auto;
  margin-right: auto;
}
Si esto no te funciona en algún navegador porque se usa la forma de centrado de texto, debemos indicar la navegador que la imagen es un elemento de nivel de bloque. De esta forma podremos centrarlo como si de otro bloque se tratase. Usaremos este código:

 

Hacemos que el elemento se muestre en bloque, y le damos un margen automático (es suficiente con que el margen sea automático a los lados, arriba y abajo puedes poner el que quieras). Ten en cuenta que si la imagen ocupa todo el ancho no se verá centrada.

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

3. Cómo centrar una imagen en página web usando Bootstrap


Con este popular framework todo es más sencillo, nos bastará con poner como clase center-block en la imagen.
<img class="center-block" src="solvetic.png" alt="Solvetic">
Habrá que descargar Bootstrap y enlazarlo o poner su CDN en nuestro HTML, para ello dejo a continuación su enlace:

 

 

Podemos ver el resultado de aplicar estos códigos con una imagen a continuación:

 

2-Cómo-centrar-una-imagen-con-HTML-y-CSS.png

 

De esta forma podremos tanto centrar nuestras imágenes en HTML como usando CSS y así hacer trabajos web estéticamente más acertados.

 

Pasos para poder alinear una imagen a la izquierda o a la derecha usando CSS.


¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X