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

Text-Align/Align-Items

Referente ao curso HTML e CSS: praticando HTML/CSS

por Professor Miranda
| 23.4k xp | 9 posts
Professor

Olá. Com base nos trechos de código que seguem, gostaria de saber pq o "text-align" foi usado ao invés do "Align-Itens"? Além disso, pq o "text-align" foi colocado na class ".dispositivos" e não em .dispositivos__lista?

HTML

<section class="dispositivos">
        
        <h2 class="dispositivos__titulo">
            Disponível em seus dispositivos favoritos!
        </h2>

        <ul class="dispositivos__lista">
            
            <li>
                <img src="assets/imagens/tv.png" alt="Ícone TV">

                <h3 class="lista__item">
                    TV.
                </h3>

            </li>

            <li>

                <img src="assets/imagens/computador.png" alt="Ícone computador">

                <h3 class="lista__item">
                    Computadores.
                </h3>

            </li>

            <li>
                <img src="assets/imagens/celular.png" alt="Ícone celular e tablet">

                <h3 class="lista__item">
                    Celulares e Tablets.
                </h3>

            </li>
        </ul>

    </section>

CSS

.dispositivos{
    text-align: center;
}
    
.dispositivos__lista{
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-bottom: 5em;
}
    
.dispostivos__titulo{
    font-size: 48px;
    color: var(--branco-principal);
}
2 respostas
solução!
por Mike de Sousa
| 541.3k xp | 717 posts
Alura Scuba Team Suporte Educacional

Olá, Professor Miranda! Tudo bem?

Vamos esclarecer suas dúvidas sobre o uso de "text-align" e "align-items".

  1. Por que usar "text-align" ao invés de "align-items"?

    O "text-align" é uma propriedade CSS que alinha o texto dentro de um elemento em linha reta, como parágrafos ou cabeçalhos. No código, ele está sendo usado na classe .dispositivos para centralizar o texto do título <h2> e potencialmente outros textos que possam estar dentro dessa seção.

    Já o "align-items" é uma propriedade do Flexbox, usada para alinhar itens ao longo do eixo transversal (vertical, por padrão) dentro de um contêiner flexível. No caso, a classe .dispositivos__lista está usando display: flex, então "align-items" poderia ser usado para alinhar verticalmente os itens dentro dessa lista, caso fosse necessário.

    Como o objetivo é centralizar o texto do título, "text-align" é a escolha correta.

  2. Por que "text-align" está em .dispositivos e não em .dispositivos__lista?

    A classe .dispositivos é aplicada à <section>, que é o contêiner do título <h2>. Ao aplicar "text-align: center" na .dispositivos, você centraliza o texto do título dentro de toda a seção. Se "text-align" fosse aplicado em .dispositivos__lista, ele não teria efeito sobre o título <h2>, pois .dispositivos__lista é aplicada apenas à <ul>, que contém os itens da lista e não o título.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Professor Miranda
| 23.4k xp | 9 posts
Professor

Obrigado Mike