centralizando duas imagens uma ao lado da outro | HTML e CSS

1
resposta

por Joao Rafael Fantini

| 56.3k xp | 21 posts

Tenho o seguinte codigo HTML

<!DOCTYPE html>
<html>
    <head>
        <title>pagina1</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <main>
            <img class="logo" src="logo.png" alt="Logo">
            <img class="fundo" src="fundo.png" alt="Fundo">
        </main>
    </body>
</html>

estou tentando centralizar essas duas imagens uma ao lado da outra no css porem nao esta dando certo.

.logo{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.fundo{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

Se eu utilizo do display: inline; conforme professor ensinou , as duas imagens ficam a esquerda.

O que estou fazendo de errado?

Obrigado.

1 resposta

por Vanessa Me Tonini

| 112.1k xp | 168 posts

Software Engineer Leader

29/03/2018

Olá João! O display: block força com que os elementos fiquem empilhados um embaixo do outro. Se você quiser que fique um ao lado do outro, você pode usar display: inline-block ou o flexbox. Tanto o display:inline quanto o display: inline-block são baseados no alinhamento do seu texto, portanto você também deve mudar para centralizado com text-align: center. Exemplo:

main {
    text-align: center;
}

img {
    display: inline-block;
}

Outra coisa, você criou duas classes diferentes com as mesmas propriedades. As classes são feitas para serem reaproveitadas, então crie apenas 1 classe e use ela para todos os elementos que você precisa aqueles estilos.

Veja se te ajuda!

Bons estudos.