1
resposta

Itens não alinham

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Finalizando nossa página e atividade Flexbox

por Ana Clara Frasom Torquato
| 32.7k xp | 14 posts

Eu peguei outras imagens pra bater com a cor do meu layout, ent tive que mexer no width. O display: flex deu certo, mas o conteúdo não se alinha ao centro :(

<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>

.aparelhos__lista {
    display: flex;
    justify-content: center;
}

#tv {
    width: 40%;
}

#laptop {
    width: 35%;
}

#celular {
    width: 22%;
}

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

1 resposta
por Wankerson Rodrigues
| 145.9k xp | 34 posts

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.