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

【问题标题】：How can I use CSS to vertically center the text in an anchor, within a LI?如何使用 CSS 在 LI 内的锚点中垂直居中文本？
【发布时间】：2011-11-28 03:57:32
【问题描述】：

这个问题的变体已经被问过很多次了。使用 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 样式来设置框高。结果如下所示：

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

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

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

【问题讨论】：

标签： css vertical-alignment

【解决方案1】：

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

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

【讨论】：

非常好，正是我想要的。谢谢。
完美！谢谢！

【解决方案2】：

您可以将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/

【讨论】：

【解决方案3】：

我想不出在 CSS 中做到这一点的方法。我发现我可以用 Javascript 做我需要的事情，在运行时将 padding-top 和 padding-bottom 设置为适当的值。该技术是测量 A 元素的“自然”高度，然后设置 padding 使 A 元素垂直居中。

这里是必要的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);
  }

在 CSS 中，不得为 A 元素显式设置高度或内边距。这样做会导致“自然”高度不是我们需要的。

结果是这样的：

要查看它的实际效果，go here。

【讨论】：

【解决方案4】：

在 css 中，您已将高度和行高设置为相同。然后你会得到一个矩形框。

但是你仍然在底部看到空间，原因是由于填充

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

填充：顶部底部；

因为它是 2 和 12，所以您会看到巨大的空间。

试试这个

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

让我知道它正在工作

【讨论】：

你能设置垂直对齐为中心吗？
在我看来“vertical-align”的值只能是“middle”，而不是“center”

【解决方案5】：

line-height:250%; 为我工作

【讨论】：