Cargando

Ir a contenido

X


Ver Más! HP lanza su gama de impresoras HP OffiJet pro. Una solución interesante para las necesidades de impresión en la oficina, con el ahorro por bandera y un sistema de reposición de tinta más que interesante. ¿Te lo vas a perder?


 


Cómo centrar una imagen con HTML y CSS

En este tutorial vas a ver cómo puedes centrar tus imágenes en una página web, para ello usaremos HTML, CSS y un ejemplo con Bootstrap.


Escrito por el jul 13 2016 12:05


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.

 

1. Cómo centrar imagen usando solo HTML


Esta opción no es la más recomendada, pero vamos a verla, basta con envolver a la imagen con las etiquetas center.
<center>
     <img src="solvetic.png" alt="Solvetic">
</center>
No es recomendable, porque los aspectos de colocación y de estilo debemos dejarlo para CSS y no usarlas directamente en HTML, 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 haciendo uso de 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;
    }
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.

 

3. Cómo centrar una imagen 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:

 

centrado.jpg



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!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 13 2016 12:05
  •   Actualizado jul 13 2016 17:41
  •   Visitas 61K
  •   Nivel
    Intermedio