Una simple manera de centrar un elemento con css es dándole un margen automático, pero se tiene que tener en cuenta las siguientes cosas:

  • > No tiene que heredar ni poseer flotación.
  • > No se puede cuando su posición es absoluta o relativa.
  • > El ancho del elemento a centrar debe ser menos al contenedor que se encuentra(obvio).

Si no declaramos ningún margen obtendriamos esto:

.caja { background: #D5CABF; border: 2px solid #fff; width: 220px; }

Pero al declarar un margen derecho automatico este ya se coloca en el centro:

.caja { background: #D5CABF; border: 2px solid #fff; width: 220px; margin: 0 auto; }

Nota: Si a margin le hubiésemos dado directamente el valor “auto” este seria igual para top-right-bottom-left, pero al agregarle el 0 al principio el segundo valor es tomado como el margen derecho, y a mediada que se va agregando el margen se va agregando a inferior y luego el izquierdo.

  • Para mas claridad:
  • margin: 0; (es igual para top-right-bottom-left);
  • margin: 0(top) 0(right) 0()bottom) 0(left);

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *