CSS垂直对齐圆心中心

Question

我试图在锚点垂直中心文本.我使用了行高并且它可以工作,但是当文本换行时,第二行中的文本获得行高...我怎样才能使文本在锚中居中而不会失败呢？

http://jsfiddle.net/y2UYX/1/ - 单击圆圈以显示其他圆圈,您将看到我的意思.

我想尽可能多地支持浏览器.如果您添加额外的属性以支持更多浏览器,请通过添加注释说明哪个浏览器的哪一行.

非常感谢你!

Answer 1

您可以使用display:table属性.像这样写:

.SubMenu li {
  margin:50px;
  background:red;
  border-radius:50px;
  height:100px;
  width:100px;
  display:table;
}

.SubMenu a {
   height:100px;
   width:100px;
   display:table-cell;
   text-align: center;
   vertical-align: middle;
}

检查这个http://jsfiddle.net/y2UYX/6/