Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Centralização de duas imagens

Olá,

Buscando aplicar os conhecimentos que estou obtendo no curso, tentei fazer uma página levemente diferente. Peguei o código da parte 1, mas, em vez de ter uma imagem só no topo, quis colocar duas imagens menores e ajustei o tamanho. O problema é que não consigo centralizar as imagens, elas ficam deslocadas para a esquerda. Como posso ajeitar isso?

body>
        <header>
            <h1 class="titulo-principal">Cake Gouveia: bolos fofinhos</h1>
        </header>
        <img id="banner" src="CG_principal.jpeg">
        <img id="banner" src="belezura.jpeg">

Essa é a parte do HTML relativa às imagens, naturalmente tem continuação e fechei direitinho

, , etc.
#banner {
    width:45%;
    height: 520px;
    display: inline-block;
    margin: 0 auto;
}

Essa é a parte do CSS.

Muito obrigado :)

2 respostas
solução!

Eduardo, boa tarde!

Você pode envolver ambas as imagens em uma div

<div class="container">
        <img id="banner" src="https://baconmockup.com/300/200">
        <img id="banner" src="https://baconmockup.com/300/200">
</div>

E no seu css definir esse container com um text-align: center

.container{
  text-align:center;
}

Espero ter ajudado e bons estudos!

Muito obrigado, Felipe :) Não sei como não havia pensado nisso