Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

centralizar saudação

Alguém pode me explicar como eu faço para centralizar a parte da saudação? tentei algumas vezes e não consegui.

2 respostas
solução!

Coloque 2rem de padding para todas as <section> por meio da classe .secao-inicio e também 2em de padding na tag <p> da seção de saudação:

HTML:

<section class="secao-inicio saudacao">

    <p> <span class="saudacao-inicio"> Olá, </span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha"> e eu construo <em> sites maravilhosos </em> </span> </p>

    <a class="botao-index" href="../biografia/bio.html">Conheça mais um pouco sobre mim</a>

</section>

CSS:

.secao-inicio
{
    padding: 2rem;
}

.saudacao p
{
    padding: 2em;
}

--------------------------------------------------------------------

Porém, há outro jeito de fazer utilizando a propriedade margin. Colocando margin: 0 auto; na tag <p> da seção de saudação essa tag irá centralizar-se horizontalmente com a <section>. Só que há mais um detalhe, como a tag <p> é do tipo block, ela tem width: 100% (gasta uma linha inteira). Obviamente não há como centralizar algo que já ocupa todo o espaço. Então se você quiser usar a propriedade margin, você precisará delimitar a largura do parágrafo, você pode usar por exemplo:

.saudacao p
{
    width: 70%;
    margin: 0 auto;
}

O número 0 diz que as margens de cima e de baixo são 0. Já a keyword (palavra-chave) auto diz que as margens laterais devem ser automáticas.

Fala Pedro, tudo bom?

Da uma olhadinha nesse post, pode ti ajudar bastante: http://www.maujor.com/tutorial/centralizando-com-css-um-guia-completo.php

Nos próximos capítulos do curso você vai ver mais sobre esse tópico também :)