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

Centralizar a tag nav sem ser hardcoded

Olá.

Na aula, o professor centraliza a tag

de forma hard-coded em 110px, levando em conta que a imagem possui 240px.

Por favor, gostaria de saber se há alguma forma mais elegante de fazer essa centralização.

Obrigado.

4 respostas

sim há sim, para isso, você usaria o flexbox. o que o professor esta passando é como você pode fazer muita coisa so manipulando o display das tags. te aconselho a prestar bastante atenção nessas aulas, porque é a base de tudo.

solução!

Há outras formas, sim.

Eu fiz uma pequena alteração e obtive um resultado bem parecido na centralização vertical da <nav>.

Na regra CSS para o elemento <nav>, substituí apenas o valor da propriedade top – de 100px por 50%.

Antes (no exemplo do instrutor):

nav {
    position: absolute;
    top: 110px;
    right: 0;
}

Após a alteração:

nav {
    position: absolute;
    top: 50%;
    right: 0;
}

O resultado em ambos os casos é visualmente bem parecido. Você pode mexer no valor percentual para ajustar conforme seu gosto.

Valeu, Gabriel, entendi.

Como a tag nav está absolute em relação à div que é "pai dela" (e que está relative), o top: 50% funciona como eu queria.

Obrigado!

Bacana desse jeito que você fez, Gabriel. Acredito que assim poderá se adaptar mais facilmente a vários tipos de tela.