Cómo centrar una imagen en css3

Video: Tutorial Como Centrar Vertical y Horizontalmente con CSS

Una de las preguntas más frecuentes sobre CSS3 es cómo centrar una imagen en la página. Por desgracia, la mayoría de las respuestas que recibe discutir sólo la etiquetar, sin mostrar cómo centrar un contenedor. El uso de un contenedor es importante porque es posible que desee agregar otros elementos a la imagen más tarde. El siguiente procedimiento explica cómo centrar la imagen.

Video: Centrar div con CSS

1. Abre el archivo SimpleGraphics.CSS y añadir el siguiente estilo.

   #ImageContainer img {height: 400px; anchura: 400 píxeles; margen: 0px;}

   El propósito de este estilo es la de crear una imagen de un tamaño específico. Hay un número de maneras de tratar con imágenes de varios tamaños. Este es uno de ellos. Funciona bien cuando la mayoría de sus imágenes son aproximadamente del mismo tamaño.

   En algunos casos, como cuando se está centrando imágenes de muy diferentes tamaños, debe recurrir al uso de javascript. Para colocar una imagen en el centro de la página, debe conocer el tamaño de la imagen. Muchas bibliotecas de terceros hacen que sea fácil para usted para centrar las imágenes en pantalla - la técnica de CSS sólo tiene límites.

2. Agregue el código siguiente al estilo #ImageContainer.

   position: absolute-height: 400px; anchura: 400 píxeles; izquierda: 50% -margin-left: -205px;

   Este código establece el

   posición como absoluta y le da el mismo tamaño que la imagen, de manera que la
   y etiquetas están vinculados. A continuación, coloca el lado izquierdo de la
   50% a través de la página, por lo que no importa lo que el usuario cambia la ventana del navegador, el lado izquierdo de la
   seguirá siendo central.

   Por supuesto, usted no desea centrar el lado izquierdo de la

   - desea centrar la imagen. La configuración del margen-izquierda se mueve la izquierda margen de 205 píxeles a la izquierda (la mitad del tamaño global de la imagen, más el relleno), de modo que el centro de la imagen está ahora en el centro de la página.

3. Guarde el archivo CSS y volver a cargar la página.

   Video: Alinear texto verticalmente con CSS

   Usted ve la imagen y su imagen centrada en la página.

   

   Video: 8. 50 trucos con CSS - Centrar horizontal y verticalmente un elemento HTML con CSS