- Como centralizar uma imagem em Div horizontalmente?
- Propriedade de Margem
- Módulo Flexbox
- Esquema de vista de grelha
- Atributo de Posição
Como centralizar uma imagem em Div horizontalmente?
O desenvolvedor pode utilizar a propriedade margin, o módulo Flexbox, o layout Grid View e o atributo Position para centralizar uma imagem no div horizontalmente. Siga o guia abaixo para centralizar a imagem horizontalmente na tag div.
Suponhamos que exista uma div em que a imagem seja colocada desta forma no arquivo HTML:
< div aula = 'raiz' >
< img origem = '../livro.jpg' altura = 'cinquenta%' largura = 'cinquenta%' aula = 'imagem' >
< / div >
A imagem está ficando com largura e altura de 50% e uma classe de “imagem”.
Usando Propriedade de Margem
Os usuários podem adicionar espaço ao redor dos elementos HTML usando a propriedade margin. Atribui uma margem de acordo com o espaço disponível após o redimensionamento da tela da janela. Por exemplo, define as margens esquerda e direita como auto, e a propriedade display é definida como block:
img {
exibição: bloco;
margem esquerda: auto;
margem direita: auto;
}
Depois de executar o exemplo acima, a página da Web ficará assim:
A saída acima mostrou que a imagem agora está no centro.
Usando o Módulo Flexbox
O ' flexbox ” é um módulo que contém um conjunto completo de propriedades. Em nosso caso, selecione a classe do elemento raiz e use flex como valor da propriedade display. Defina o centro como um valor para “ justificar-conteúdo ' e ' itens de alinhamento ” Propriedades:
.raiz {exibição: flexível;
justificar- contente : Centro;
itens de alinhamento: centro;
fundo- cor : azul;
}
A página da Web fica assim, depois de executar o código:
A saída acima mostra que a imagem é exibida no centro do div com uma cor de fundo definida como “azul”.
Usando o Módulo de Layout de Exibição em Grade
O layout da exibição em grade tem 12 colunas e a largura total é definida como 100% e coloca cada elemento em uma posição específica na página da web:
.raiz {exibição: grade;
itens de lugar: centro;
}
No trecho de código acima, o valor “grid” é atribuído à propriedade display. Enquanto “place-item” é usado como um atalho para as propriedades “justify-content” e “align-items”:
A saída autentica que a imagem está no centro do div usando o método grid:
Usando atributo de posição
Definindo a posição da classe raiz para valor relativo e a classe de imagem para valor absoluto. A imagem pode ser exibida no centro do div:
.raiz {posição: relativa;
}
.imagem {
largura : 700 pixels;
altura : 500 pixels;
posição: absoluta;
esquerda: cinquenta %;
transform: translateX ( - cinquenta % ) ;
}
A imagem é movida para a esquerda de “50%” e depois transformada de volta para “-50%” no eixo X. Ele exibe a imagem no centro do div horizontalmente:
É assim que a imagem pode ser centralizada no div horizontalmente.
Conclusão
Para definir horizontalmente a imagem em um elemento div, use o botão “ margem ”, “ módulo flexível ”, “ layout de grade ' e ' posição ” propriedades. O ' margem A propriedade de esquerda e direita é definida como automática. O “módulo flexível” e o “Layout de grade” definem a exibição para flex e grade respectivamente e usam o “ colocar item “ para centralizar a imagem. A propriedade position define o valor relativo à classe raiz e absoluto à classe image e usa as propriedades “left” e “transform”. Este blog demonstrou com sucesso como centralizar imagens em um div horizontalmente.