In the figma file that I have (which I have attached), the logo is vertically centered. But the links on the right are slightly above the logo.
However, my code shows that both are vertically aligned:
I have tried using margin, padding, and height settings. None of them has worked. I am not sure what else to try.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Lato", sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
border: 1px solid red;
padding: 50px;
padding-left: 75px;
}
.heading {
display: flex;
font-size: 1.2rem;
color: green;
}
.heading .light_text {
font-weight: 500;
}
.house img {
height: 30px;
}
.nav_list {
padding-right: 100px;
font-size: 1rem;
font-weight: 500;
}
.nav_list ul {
display: flex;
/* breaks the list horizontally */
list-style-type: none;
/* removes the bullet points */
}
.nav_list li {
margin: auto 15px;
}
.nav_list a {
text-decoration: none;
color: green;
}
<body>
<div class="container">
<div class="navbar">
<div class="heading">
<div class="logo_name">
<h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
</div>
</div>
<div class="nav_list">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
3
Answers
The simplest thing is to use
transform: translateY
. However, this is not best practiceYou can add some top margin to an element to move it lower down. In your case, just add a little top margin to
.logo_name
.You’re already using Flexbox. Simply add
align-items: center
to vertically center all elements.You also should use semantic tags and use less unneeded divs. A logo or title is not part of a navbar. That naming is semantically wrong. What you actually should use is the
<header>
element. The container for the anchors are semantically a<nav>
element.