如何使用css在LI中垂直居中定位文本？ [英] How can I use CSS to vertically center the text in an anchor, within a 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;
  }

结果列表如下所示：

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

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

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

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

推荐答案

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

这篇关于如何使用css在LI中垂直居中定位文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！