Alguém pode me explicar como eu faço para centralizar a parte da saudação? tentei algumas vezes e não consegui.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém pode me explicar como eu faço para centralizar a parte da saudação? tentei algumas vezes e não consegui.
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 :)