css - 如何使用 CSS 在 LI 中将 anchor 中的文本垂直居中？

Question

这个问题的变体已经被问过很多次了。 CSS 的垂直居中是一个挑战。

我有一个特定的场景，处理水平显示的列表。标记是这样的:

  <ul id='ul1' class='c'>
    <li><a href='javascript:void(0)'>Fribble Fromme</a></li>
    <li><a href='javascript:void(0)'>Fobble</a></li>
    <li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
  </ul>

样式是这样的:

  ul.c {
    height:52px;
    text-align:center;
  }
  ul li a {
    float:left;
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    line-height:1em;
    width:100px;
  }
  ul li a:hover {
    background: #CCC;
  }
  ul li {
    height:52px;
    display:inline-block;
  }

结果列表如下所示:

但我希望所有框的高度相同，并且我希望文本在每个框内垂直居中。我可以通过为 A 元素添加 height 样式来设置 box-height。结果如下所示:

...这接近我想要的，但垂直居中没有发生。

我可以为文本设置line-height，as suggested in this post , 做垂直居中。如果我知道哪些元素将获得多行文本，我什至可以为不同的 A 元素选择不同的 line-height 值。但我不知道哪些需要多行。

当某些 A 元素包含换行的文本时，如何使其居中？

Answer 1

老问题，但现在可以使用 Flexbox 更新答案。

a {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}