Como centralizar uma imagem em CSS3

Uma das perguntas mais freqüentes sobre CSS3 é a forma de centralizar a imagem na página. Infelizmente, a maioria das respostas que você recebe discutir apenas o tag, sem mostrar como o centro de 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 o centro da imagem.

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

   #ImageContainer Img {height: 400px; width: 400px; margin: 0px;}

   O objectivo do presente modelo é para criar uma imagem de um tamanho específico. Há um número de maneiras de lidar com as 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. A fim de 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.

   position: absolute-height: 400px; width: 400px; left: 50% -margin-left: -205px;

   Este código define a

   posição absoluta e dá-se o mesmo tamanho que a imagem, de modo que o
   e tags são ligados. Em seguida, 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.

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

   - pretende centrar a imagem. A configuração da margem esquerda move A margem esquerda 205 pixels para a esquerda (metade do tamanho global da imagem, mais o preenchimento), de modo que o centro da imagem é 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.