Queria saber como alinha uma img | HTML e CSS: Classes, posicionamento e Flexbox

Olá, Anderson. Tudo bem?

Para alinhar uma imagem no HTML e CSS, você tem várias opções dependendo do tipo de alinhamento que deseja (centralizado, à esquerda, à direita, etc.). Vou te mostrar como fazer isso utilizando o Flexbox.

Centralizando uma Imagem com Flexbox

HTML: A sua imagem precisa tá em um container.

<div class="image-container">
    <img src="https://br.web.img3.acsta.net/pictures/19/09/18/13/46/0198270.jpg" alt="Descrição da imagem">
</div>

CSS: Utilize o Flexbox para centralizar a imagem.

.image-container {
    display: flex;
    justify-content: center; /* Alinha horizontalmente */
    align-items: center; /* Alinha verticalmente */
    height: 100vh; /* Altura do contêiner, ajustável conforme necessário */
}

.image-container img {
    max-width: 100%; /* Para garantir que a imagem não ultrapasse o contêiner */
    height: auto; /* Mantém a proporção da imagem */
}

Exemplo Completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alinhamento de Imagem</title>
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #0000FF; /* Cor de fundo azul */
        }

        .image-container img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="https://br.web.img3.acsta.net/pictures/19/09/18/13/46/0198270.jpg" alt="Descrição da imagem">
    </div>
</body>
</html>

Um abraço e bons estudos.

Mergulhe em programação

Centralizando uma Imagem com Flexbox

Exemplo Completo