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;
}
