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

Centralizar nome do produto

Prezado Professor e prezad@s colegas, bom dia.

Estou a adorar o curso, a exposição da matéria e a matéria em si. Pegando no código final da aula 5, e usando a técnica de depuração gráfica que o Prof. ensinou se definir a cor de fundo dos elementos, verifiquei que o nome do produto, na página produtos.html, não ocupa toda a largura do elemento da lista, conforme apresentado na imagem https://drive.google.com/file/d/1sDo-uFMlDJVeUE_LVV2n4LMh12jcrbhf/view?usp=sharing. Já tentei brincar com alinhamentos, margens e espaçamentos internos, mas sem sucesso.

Alguém pode ajudar? Grato, José

3 respostas

Bom dia, você tentou usar o "text-align: center;" ou então "margin-left:1%;" ?

Bom dia Vitor, tentei. Acabei de verificar que as imagens dos produtos é que estão superando o limite dos outros elementos da lista em 16 pixels na largura. Não sei se ajuda, mas todos os elementos da lista precisaram de acompanhar o tamanho das imagens de forma transparente. Grato, José

solução!

Acho que consegui, segundo o site https://www.w3schools.com/cssref/pr_dim_width.asp ao definir a largura da imagem com 100% do espaço disponível como:

.produtos img {
    /*border: 2px solid yellow;*/
    width: 100%;
}

... parece que agora a imagem não passa dos limites dos restantes elementos da lista, acabando tudo por ficar mais centralizado. Isso, inclusive se mudarmos o nome dos produtos ou a sua descrição.