Olá, tudo bom?
Estou com uma dúvida sobre se é permitido, falando em semântica, encapsular o main e aside em uma div para poder centraliza-los na tela, ou se existe uma outra forma melhor pra se fazer isso.
Abraço!
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
Olá, tudo bom?
Estou com uma dúvida sobre se é permitido, falando em semântica, encapsular o main e aside em uma div para poder centraliza-los na tela, ou se existe uma outra forma melhor pra se fazer isso.
Abraço!
Olá Yuri,
Não impacta muito não, mas como está o seu código? você não consegue usar o próprio <body> ou o próprio <html> para deixa-los centralizados?
Qualquer coisa coloque o seu código aqui para te ajudarmos ;)
O código abaixo é após o header. Eu preciso centralizar o aside que terá uma navegação (a esquerda) e o main que terá o conteúdo da página (a direita), mas se eu deixá-los sem esse encapsulamento da div com a classe container, eles ocupam a tela toda.
Deu um branco, não tenho ideia de como colocá-los ao centro juntos.
<div class="container">
<div class="breadcrumb">
<ol class="breadcrumb-list">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Plano de crescimento</a></li>
</ol>
</div>
<h2 class="subtitulo">Plano de Crescimento</h2>
<h3 class="slogan">Viva a beleza das suas escolhas!</h3>
<main class="main">
<section>
<h1>A grande novidade da Consultoria de Beleza Natura!</h1>
</section>
</main>
<!-- Este é o aside da página -->
<aside class="aside">
<nav>
<ul>
<li><a href="#">Plano de crescimento</a></li>
<li><a href="#">Consultoria de Beleza Natura</a></li>
<li><a href="#">Confira sua pontuação</a></li>
<li><a href="#">Cresça com a Natura</a></li>
<li><a href="#">Líder de Negócios Natura</a></li>
<li><a href="#">Folheto completo</a></li>
</ul>
</nav>
</aside>
<!-- Este é o rodapé da página -->
<footer>
</footer>
</div>E aí Yuri,
Dá uma olhada neste Link, é o seu código, olhe que no CSS eu coloquei apenas
main, aside {
display: inline-block;
}
e ele já ficou um do lado do outro, se você tirar a <div> com a class container no começo, ele também mantem um do lado do outro.
Espero ter ajudado.