2
respostas

Como centralizar elementos

Pessoal, boa noite!

Estou com uma dúvida sobre como centralizar os 3 links do "Acesse minhas redes", sendo que estão em tags âncoras diferentes. Podem me ajudar, por favor?

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

2 respostas

Oi, Giovanna!

Você já tentou criar uma classe igual para os três elementos? E aí você colocar estilo nessa classe, ele vai ser aplicado a todos ao mesmo tempo.

Olá Giovanna, para isso as tag ancoras devem estar dentro de uma div, com um classe e depois estilizar essa classe para que os elementos filhos fiquem centralizados, conforme exemplo abaixo:

                <div class="apresentacao__links">

                <h2 class="apresentacao__links__texto">Acesse minhas redes:</h2>          
                <a class="apresentacao__links__navegacao" href="#" target="_blank"> 
                    <img src="#" alt="LogoInstagram">Instagram</a>
                <a class="apresentacao__links__navegacao" href="#" target="_blank">
                    <img src="#" alt="LogoGithub">Github</a>
                <a class="apresentacao__links__navegacao" href="#" target="_blank"> 
                    <img src="#" alt="LogoLinkedin">Linkedin</a>

            </div>

            <style>

            .apresentacao__links{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: center;
                    gap: 32px;
            }

            </style>