Alguém pode me explicar como eu faço para centralizar a parte da saudação? tentei algumas vezes e não consegui.
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 :)