Como Centralizar Imagem na Tela
Para centralizar uma imagem na tela, você pode usar HTML5 e CSS. Veja o código abaixo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centralizar Imagem na Tela</title>
<style>
/* Estilos para centralizar a imagem */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.centered-image {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<img class="centered-image" src="caminho/para/sua/imagem.jpg" alt="Imagem">
</body>
</html>Neste código, a imagem será centralizada na tela, independentemente do tamanho da janela do navegador.
Explicação:
display: flex;comjustify-content: center;ealign-items: center;: Essas propriedades CSS são aplicadas ao<body>e<html>para centralizar vertical e horizontalmente o conteúdo da página..centered-image: Este é um seletor de classe para a imagem. Definimosmax-width: 100%;emax-height: 100%;para garantir que a imagem não ultrapasse os limites da tela e mantenha sua proporção original.
Basta substituir "caminho/para/sua/imagem.jpg" pelo caminho real da sua imagem.
Com esse código, a imagem será centralizada na tela, independentemente do tamanho da janela do navegador.
Os códigos aqui mostrados não se aplicam quando se usa plataformas para desenvolvimento de site, vez que elas já definem todos os códigos. O usuário consegue inserir apenas seu conteúdo na página.
Nenhum comentário:
Postar um comentário