Posicionamento das imagens centralizada na lista | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Lidando com bordas e atividade Aplicando bordas

por hamamotogreenwholeme

| 23.6k xp | 5 posts

Estou tentando inspecionar o código CSS de forma a enquadrar as minhas imagens dentro de cada frame que estão no momento aparecendo fora das frames (por favor me corrijam se estou utilizando a terminologia errada) As imagens estão aparecendo mais para a direita. Alguém poderia me orientar como utilizar a inspeção de forma correta onde possa alinhar o tamanho das frames onde as imagens estão dentro ou se devo alterar o tamanho da imagem do arquivo. De qualquer forma apenas tenho que conseguir colocar cada imagem dentro de cada frame-lista.

. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

solução!

por Kelwin Deriz Hollunder

| 156.5k xp | 114 posts

Designer Gráfico

30/11/2021

Eu passei pelo mesmo problema e não consegui entender completamente como estruturar da forma correta. Consegui meio que na gambiarra, colocando o width para 300.

```
ul.produtos li {
display: inline-block;
text-align: center;
vertical-align: top;
width: 30%;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;  /**para nosso padding se comportar de acordo com a % do widht*/
border: 3px #000000 solid;
border-radius: 10px 25px 10px 25px; }

ul.produtos img {
    display: inline;
    margin: 0 auto;
    width: 230px;