I am currently designing a straightforward menu layout similar to this
<div className="main-menu">
<ul>
<li className="main-menu__app-menu"><a href="#">link 1</a></li>
<li className="main-menu__app-menu"><a href="#">link 2</a></li>
<li className="main-menu__app-menu"><a href="#">link 3</a></li>
<li className="main-menu__user-menu"><a href="#">link 4</a></li>
<li className="main-menu__user-menu"><a href="#">link 5</a></li>
</ul>
</div>
alongside the following CSS code
.main-menu {
border-bottom: 1px solid #000000;
& > ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
& > li {
display: inline;
border: 1px solid #FF0000;
height: 50px;
& > a {
display: block;
text-align: center;
padding: 1.4rem 1.6rem;
color: #000000;
text-decoration: none;
&:hover {
color: #808080;
}
}
}
}
&__app-menu {
float:left;
}
&__user-menu {
float:right;
border: 1px solid #000000;
border-radius: 1.5rem;
margin: 0 .1rem;
}
}
The two __user-menu links have borders, however when I decrease its height, the label remains fixed and doesn't align to the middle of the button.
Where should I specify the height in order for the label height to always be centered?