Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Quais as melhores alternativas para alinhar verticalmente?

Olá!

Criei a barra de navegação a seguir, porém gostaria de saber se há outras alternativas para alinhar verticalmente os elementos de um container, pois só consegui pensar na maneira descrita pelo código abaixo. Utilizei as propriedades position, top e transform.

Print de como a página se encontra: https://puu.sh/Fha3x/09551465cb.png

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NavBars</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main-box">
        <div class="sub-box">
            <div class="logo-box">
                <h1 class="logo-name">Logo</h1>
            </div>
            <ul class="nav-box">
                <li class="nav-item">About</li>
                <li class="nav-item">Portfolio</li>
                <li class="nav-item">Blog</li>
                <li class="nav-item">Contact</li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: normal;
}

.main-box {
    background-color: #eee;
}

.sub-box {
    width: 85%;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    background-color: yellow;
}

.logo-box, .nav-box, .nav-item {
    display: inline-block;
}

.logo-name {
    font-size: 30px;
    text-transform: uppercase;
    margin-left: 30px;
}

.nav-box {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 30px;
}

    .nav-item:nth-child(-n + 3) {
        margin-right: 15px;
    }
1 resposta
solução!

Oi, Leonardo, tudo bem?

As propriedade flex-box são ótimas para nos ajudar a alinhar verticalmente elementos dentro de uma container, inclusive, atualmente estou fazendo um projeto, com uma navbar com o conceito básico parecido com o link que você colocou acima e utilizei, vê aqui na documentação: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox e tem muito muito tutorial sobre como utilizar flexbox para alinhamento, como em navbar, por exemplo. Aqui temos também um curso de flex-box, segue: https://www.alura.com.br/curso-online-posicione-elementos-com-flexbox

Mas a priori, você teria que refatorar o seu css para usar o flex-box, inicialmente colocando no seu container a propriedade display: flex;, além de ser mais fácil o seu css fica menos verboso, com menos propriedades e, caso precise futuramente, a manunteção é mais fácil também.

Espero ter te ajudado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software