考虑到大项目，垂直居中菜单项[重复]答案

【问题标题】：Vertically center a menu item considering large items [duplicate]考虑到大项目，垂直居中菜单项[重复]
【发布时间】：2022-01-26 08:10:44
【问题描述】：

我想垂直居中菜单项。但是，当我按照下面列出的方式执行此操作时，您会发现大菜单项变得太大。这是因为我将 Line-height 设置为 35px。我正在寻找一个替代方案，即整个框不会变得太大，但文本仍然垂直居中。

非常感谢。

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>

【问题讨论】：

标签： html css

【解决方案1】：

您只需要删除line-height 并使用padding 来代替空格

 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
    }

【讨论】：

【解决方案2】：

对您的 CSS 进行类似的更改，如下所示：

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

【讨论】：

【解决方案3】：

通过使用 flex 你可以处理这个问题，我对li 类做了一些改变：

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>

【讨论】：

【解决方案4】：

你可以在 ul 上使用 flex。

这个 sn-p 删除了 line-height 设置，因为这会使事情变得太大。

它添加了一些填充以将项目分开一点。

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>

【讨论】：