怎么使用css在LI中垂直居中定位文本？

本教程将介绍如何使用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;
  }

结果列表如下所示：

但我希望所有框的高度相同，并且希望文本在每个框中垂直居中。我可以通过为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中垂直居中定位文本？的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。