I want to center menu items vertically. However when I do this in the way as listed below you see that the large menu item becomes too big. This is because I set the Line-height to 35px. I am looking for an alternative that the whole box doesn’t become too big but the text is still vertically centered.
Thanks soo much.
ul {
list-style: none;
width: 360px;
}
li {
display: inline-block;
vertical-align: baseline;
min-height: 35px;
line-height: 35px;
background: #000000;
width: 259px;
margin-right: 10px;
text-align: center;
border-bottom: 2px solid #fff;
}
a {
color: #fff
}<ul>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Duck sauce and cheesecake recipe for special people </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
</ul>
>Solution :
By using flex you can handle this, I do some change on li class:
ul {
list-style: none;
width: 360px;
}
li {
display: flex;
align-items: center;
justify-content: center;
min-height: 35px;
background: #000000;
width: 259px;
margin-right: 10px;
text-align: center;
border-bottom: 2px solid #fff;
padding: 10px;
}
a {
color: #fff
}<ul>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Duck sauce and cheesecake recipe for special people </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
<li> <a href="#">Menu item 1 </a> </li>
</ul>