如何使用CSS在LI内的锚中垂直居中文本？

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

结果列表如下所示:

但我希望所有的盒子都是相同的高度,我希望文本在每个盒子中垂直居中.我可以通过height为A元素添加样式来设置box-height .结果如下:

......这与我想要的很接近,但垂直居中并没有发生.

我可以按照这篇文章的建议设置line-height文本来进行垂直居中.如果我知道哪些元素将获得多行文本,我甚至可以为不同的A元素选择不同的值.但我不知道哪些会需要多行.line-height

当一些A元素包含文本时,如何将其置于中心位置？

Answer 1

你可以使用display:table,等等vertical-align:middle

ul.c {
    text-align:center;
    display:table;
}

ul li {   
    float:left;    
}

ul li a {
    text-decoration:none;
    border: 1px solid Maroon;
    padding:2px 12px;
    background:#FFEF8A;
    width:100px;
    height:52px;
    display:table-cell;
    vertical-align:middle;
}

ul li a:hover {
    background: #CCC;
}

示例: http ://jsfiddle.net/kf52n/2/

Answer 2

老问题,但现在可以使用Flexbox更新答案.

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