Vertically center a menu item considering large items

Question

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>

score 2 · Accepted Answer · answered Dec 27 '21 at 10:26

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>

score 1 · Answer 2 · answered Dec 27 '21 at 10:24

you just need to remove line-height and use padding instead for spacing purpose

 ul {
      list-style: none;
      width: 360px;
    }
    
    li {
      padding: 8px 16px;
      display: inline-block;
      vertical-align: baseline;
      min-height: 35px;
      background: #000000;
      width: 259px;
      margin-right: 10px;
      text-align: center;
      border-bottom: 2px solid #fff;
    }
    
    a {
      color: #fff
    }

score 1 · Answer 3 · answered Dec 27 '21 at 10:25

Make similar changes to your CSS as below:

ul {
  list-style: none;
  width: 60px;
  margin: auto;
}

li {
  display: inline-block;
  vertical-align: baseline;
  height: 35px;
  line-height: 35px;
  background: #000000;
  width: 159px;
  overflow: hidden;
  margin-right: 10px;
  text-align: center;
  border-bottom: 2px solid #fff;
}

a {
  color: #fff;
}

score 1 · Answer 4 · answered Dec 27 '21 at 10:26

You could use flex on the ul.

This snippet removes the line-height setting as that made things too big.

It adds some padding to space the items out a bit.

ul {
  list-style: none;
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

li {
  display: inline-block;
  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>

Vertically center a menu item considering large items

4 Answers4