Como centralizar uma imagem em css3

Video: CSS: Imagem centralizada

Uma das perguntas mais freqüentes sobre CSS3 é a forma de centralizar uma imagem na página. Infelizmente, a maioria das respostas que você receber discutir apenas o tag, sem mostrar como centro um recipiente. Usando um recipiente é importante porque você pode querer adicionar outros itens para que a imagem mais tarde. O procedimento a seguir mostra como centralizar a imagem.

1. Abra o arquivo SimpleGraphics.CSS e adicione o seguinte estilo.

   Video: Como centralizar uma DIV (HTML + CSS)

   #ImageContainer img {altura: 400 p; largura: 400 p; margem: 0px;}

   O propósito deste estilo é criar uma imagem de um tamanho específico. Há uma série de maneiras de lidar com imagens de vários tamanhos. Este é um deles. Ele funciona bem quando a maioria de suas imagens são aproximadamente o mesmo tamanho.

   Em alguns casos, tais como quando você está centrando imagens de tamanhos muito diferentes, você deve recorrer ao uso de javascript. Para colocar uma imagem no centro da página, você deve saber o tamanho da imagem. Muitas bibliotecas de terceiros tornar mais fácil para que você possa centralizar as imagens na tela - a técnica somente CSS tem limites.

2. Adicione o seguinte código ao estilo #ImageContainer.

   
   
   
   

   posição: absoluta-altura: 400 p; largura: 400 p; esquerdo: 50% -margin-esquerda: -205px;

   Este código define a

   posição como absoluta e dá-lhe o mesmo tamanho que a imagem, para que o
   e etiquetas estão ligados. Em seguida, ele coloca o lado esquerdo da
   50% em toda a página, de modo que não importa como o usuário muda a janela do navegador, o lado esquerdo do
   permanecerá centro.

   Video: Como centralizar uma imagem na vertical e horizontal em uma DIV

   Claro, você não quer centralizar o lado esquerdo da

   - você quer centralizar a imagem. A definição da margem esquerda move os MARGEM ESQUERDA 205 pixels para a esquerda (metade do tamanho geral da imagem, mais o estofamento), de modo que o centro da imagem está agora no centro da página.

3. Salve o arquivo CSS e recarregue a página.

   Você vê a imagem e seu quadro centrado na página.

   

   Video: Como Centralizar Uma DIV Dentro de Outra DIV Com CSS