Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Texto não alinha

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

por Ana
| 15.6k xp | 24 posts

CSS

.dispositivos__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 5em 0;
}

.dispositivos {
    text-align: center;
}

.dispositivos__titulo {
    font-size: 48px;
    color: var(--branco-principal);
}

.lista__item {
    font-size: 32px;
    color: var(--branco-principal);
}

HTML

    </section class="dispositivos">
            <h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
            <ul class="dispositivos__lista">
                <li>
                    <img src="assets/tv.png" alt="Ícone de televisão">
                    <h3 class="lista__item">TV</h3>
                </li>
                <li>
                    <img src="assets/computador.png" alt="Ícone de computador">
                    <h3 class="lista__item">Computadores</h3>
                </li> 
                <li>
                    <img src="assets/celular.png" alt="Ícone de celular">
                    <h3 class="lista__item">Celulares e Tablets</h3>
                </li>  
            </ul> 
    </section>

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

3 respostas
solução!
por Viniciusoliveiradebarros
| 84.3k xp | 7 posts

Boa tarde Ana. Tudo bem ?

Estava vendo seu código css e eu iria sugerir adicionar um "display: flex" nos li do ul, usando também o flex-direction e o align-items.

.dispositivos__lista li {
    display: flex;
    align-items: center;
    flex-direction: column;
}

Espero ter ajudado. Qualquer coisa estou a disposição para ajudar.

por Ana
| 15.6k xp | 24 posts

Alinhou o texto embaixo, funcionou. Mas não o título. Então joguei o mesmo código em cima e foi. Muito obrigada.

por Marcos.inacio
| 39.5k xp | 1 posts

Olá Ana, tudo bem?

Não sei se já fechou essa duvida, mas de qualquer forma, tenta aplicar a propriedade text-align com o valor center dentro da sua class .dispositivos__lista. Ex: .dispositivos__lista { text-align: center; }.

Como o elemento que envolve sua lista é do tipo bloco, aplicando text-align os elementos filhos herdam o valor do pai.