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

关于这个问题的各种说法已被多次提出。使用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;
  }

结果列表如下所示：

  <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

样式来设置框的高度。结果如下所示：

  <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元素选择不同的

行高值。但我不知道哪些需要多行

当某个元素的某些文本换行时，如何使其居中
 我想不出在CSS中实现这一点的方法。我发现我可以用Javascript做我需要的事情，在运行时将
padding top
和
padding bottom
设置为适当的值。该技术是测量元素的“自然”高度，然后设置填充，使元素垂直居中

以下是必要的js代码：

  function setHeightIntelligently(ulElement) {
    var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
        naturalHeight, pad;
    items = ulElement.children;
    for(i=0, L1 = items.length;i<L1;i++){
      if (items[i].tagName.toUpperCase() == 'LI') {
        anchor = items[i].children[0]; 
        naturalHeight = anchor.clientHeight;
        pad = (availableHeight - naturalHeight)/2;
        anchor.style.paddingTop= pad+'px';
        anchor.style.paddingBottom= pad+'px';
      }
    }
  }

  function init() {
    var element = document.getElementById('ul1');
    setHeightIntelligently(element);
  }

智能设置函数高度（ulElement）{
变量项，L1，i，锚定，可用高度=ulElement.ClientHight，
自然高度，垫；
items=ulElement.children；
对于（i=0，L1=items.length；i您可以使用
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;
}

示例：
在css中，您已将高度和线条高度设置为相同。然后您将得到一个矩形框

但是你仍然可以看到底部的空间，原因是填充

在填充中添加两个值将添加顶部和底部填充

填充：上下

因为它是2和12，你会看到巨大的空间

试试这个

height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;

让我知道它正在工作
旧问题，但现在可以使用Flexbox更新答案

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

线条高度：250%；
适合我
非常好，正是我想要的。谢谢。太好了！谢谢！你能将垂直对齐设置为中心吗？