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

Posicionamento das imagens

Pessoal estou fazendo o projeto do curso, só que os produtos que eram pra ficar um do lado do outro, ficaram um embaixo do outro mesmo eu colocando os displays e tals, e o texto também não ficou centralizado, alguém pode me ajudar? a imagem da duvida

codigos

3 respostas
solução!

Olá!

Você está fechando as tags li exatamente após os cabeçalhos de produtos. A tag li deve envolver todo o conteúdo referente ao produto.

<li>
    <h2>Cabelo</h2>
    <img src="cabelo.jpg" alt="Cabelo">
    <p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
    <p class="produto-preco">R$ 25,00</p>
</li>
<li>
    <h2>Barba</h2>
    <img src="barba.jpg" alt="Barba">
    <p class="produto-descricao">Corte e desenho profissional de barba</p>
    <p class="produto-preco">R$ 18,00</p>
</li>
<li>
    <h2>Cabelo + Barba</h2>
    <img src="cabelo+barba.jpg" alt="Cabelo e Barba">
    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
    <p class="produto-preco">R$ 35,00</p>
</li>

Agora no CSS, para a estilização ficar completa, sugiro que altere as classes .produtos1 e .produtos1 li.

.produtos1 {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos1 li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 10px;
}

Mega funcionou, mas como você fez para que tirando as box, a imagem e os textos ficassem centralizados? Porque eu segui o curso e não funcionou

Talvez você tenha deixado passar algum ponto, mas tentarei explicar todo o processo de centralização dessa seção de produtos.

O elemento pai dos elementos apresentados é a ul com classe .produtos está centralizada em relação a página, pois ela tem uma largura definida menor que a largura da tela e suas margens laterais estão definidas como auto. Seção de Produtos da página desenvolvida durante o curso 2 de HTML e CSS

CSS:

.produtos {
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

Agora referente ao conteúdo dos itens, sua centralização se deve as propriedades informadas na classe .produtos li. Entre elas, há a propriedade width que está definida como 30%, padding (seu espaçamento interno) e, a propriedade que de fato está centralizando o texto neste espaço delimitado, text-align: center. Produto 1 da página desenvolvida durante o curso 2 de HTML e CSS

CSS:

.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000;
    border-radius: 10px;
}