Itens não alinham | HTML e CSS: praticando HTML/CSS | Alura

Itens não alinham

<section class="aparelhos"> <h2 class="aparelhos__titulo">Disponível em seus dispositivos favoritos</h2> <ul class="aparelhos__lista"> <li> <img src="img/tv.png" alt="imagem de tv" id="tv"> <h3 class="lista__itens">TV</h3> </li> <li> <img src="img/laptop.png" alt="imagem de laptop" id="laptop"> <h3 class="lista__itens">Notebook</h3> </li> <li> <img src="img/celular.png" alt="imagem de celular" id="celular"> <h3 class="lista__itens">Celular e tablet</h3> </li> </ul> </section>

Boa tarde Ana Clara! Tudo certo ?

Para centralizar o conteúdo dentro dos itens da lista (<li>), você precisa aplicar o estilo de alinhamento vertical aos elementos dentro deles. Você pode fazer isso usando a propriedade align-items: center na classe .aparelhos__lista. Isso alinhará verticalmente a imagem e o título no centro.

Além disso, você também pode adicionar margens inferiores (margin-bottom) aos elementos <li> para garantir um espaçamento adequado entre os itens da lista.

Aqui está o código CSS atualizado:

.aparelhos__lista {
    display: flex;
    justify-content: center;
    align-items: center; /* Adicionado para alinhar verticalmente o conteúdo */
}

.aparelhos__lista li {
    margin-bottom: 20px; /* Adicionado margem inferior para espaçamento entre os itens */
}

#tv {
    width: 40%;
}

#laptop {
    width: 35%;
}

#celular {
    width: 22%;
}

Com essas alterações, o conteúdo dentro dos itens da lista deve estar alinhado verticalmente ao centro, e haverá espaçamento adequado entre os itens.

Lembre-se de ajustar a margem inferior conforme necessário para obter o espaçamento desejado entre os itens. Experimente diferentes valores para encontrar a melhor aparência para o seu layout.

Qualquer coisa estou a disposição. Atenciosamente.