1
resposta

centralizar img

ALGUEM ME AJUDA A CENTRALIZAR ESSA IMAGEM DO CACHORRINHO E DO GATINHO PELO AMOR DE DEUS, PRECISO Q ELA FIQUE ANTES DO RODAPE

MEU CODIGO ESTA ASSIM:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="reset.css">
    <title>Adopet - Início</title>
</head>
<body>
    <header class="cabecalho">
            <img src="header_img.png" class="cabecalho_img_bkg">      
            <ul class="header_links">
                <li class="header_links_icons">
                    <a href="#" class="header_home"><img src="Casa.png" alt="Home Adopet"></a>
                </li>
                <li class="header_links_icons">
                <a href="#" class="header_email"><img src="Mensagens.png" alt="Entre em contato"></a> 
                </li>
            </ul> 
            <div class="cabecalho_box">
                <img src="Logo.png" alt="Logo adopet" class="cabecalho_img_logo">
                <h1 class="header_titulo">Boas-Vindas!</h1>
            </div>  
    </header>

    <main class="escritas">
            <img class="bkg_escritas" src="Forma2.png">
            <section class="escritas_bloco">
                <p class="escritas_texto">Que tal mudar sua vida <br> adotando seu novo melhor<br> amigo? Vem com a gente!</p>
                <a href="#"><button type="button" class="botao_1">Já tenho conta</button></a>
                <a href="#"><button type="button" class="botao_2">Quero me cadastrar</button></a>
            </section>
            <img src="Ilustração1.png" alt="Animaisinhos fofos" class="escritas_img">
    </main>
    <footer class="footer">
        <p class="footer_texto">2022 - Desenvolvido por Alura.</p>
    </footer>

</body>
</html>

CSS

body{
    background-color: var(--azul);

}
a{
    text-decoration: none;
}
.header_links{
    display: flex;
    position: absolute;
    margin: 3em 3em;
    top: 0%;
}
.header_links_icons{
    display: flex;
    margin: 0 3em 0 0;
}
.cabecalho_box{
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10em;
}
.cabecalho_img_logo{
    display: flex;
    margin: 0 auto;
}
.header_titulo{
    font-family: var(--fonte_titulo);
    font-size: 26px;
    color: var(--branco);
    text-align: center;
    font-weight: 500;
    padding-top: 1em;
}
.escritas_bloco{
    position: absolute;
    right: 0;
    left: 0;
}
.escritas_texto{
    font-family: var(--fonte_principal);
    font-size: 16px;
    color: var(--branco);
    font-weight: 400;
    text-align: center;
}
.botao_1, .botao_2{
    background-color: var(--laranja);
    border: 1px solid #3772FF;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
    margin-top: 1.5em;
    padding: 1em;
    color: var(--branco);
    width: 160px;
}

.bkg_escritas{
    z-index: -2;
    position: absolute;
    right: 0;
    top: 8em
}

.footer{
    position: absolute;
    bottom: 0; 
    background: var(--verde);
    width: 100%;
    height: 10%;
    z-index: -3;
}
.footer_texto{
    color: var(--branco);
    text-align: center;
    font-family: var(--fonte_principal);
    font-size: 16px;
    margin-top: 2em;
}

.escritas_img{

}   
1 resposta

Olá, Karoline!

As imagens não aparecem só com o código. Eu imagino que você esteja falando do "Animaisinhos fofos", que é a "Ilustração1.png".

Se for ela, uma boa forma de alinhar é pelo arquivo "styles.css"

Para ficar no meio, neste caso, você pode usar o comando margin-left: 50%, que diz que você quer o objeto (no caso a imagem) à 50% de distancia da margem esquerda, ou seja, no meio da tela. Pode ser que ela não fique exatamente no meio, então você pode ir ajustando a porcentagem. Então esse pedacinho da sua CSS, poderia ficar assim:

.escritas_img
{
 margin-left: 50%
 }   

Espero ter te ajudado! Boa sorte! ;)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software