2012-03-17 15 views
6

我正在尝试垂直居中文本。我使用行高和它的工作原理,但是当文本换行时,第二行中的文本将获得行高...如何将文本居中在锚点而不会像这样失败?CSS垂直对齐圆圈中心

http://jsfiddle.net/y2UYX/1/ - 点击圆圈以显示其他圈子,你会看到我的意思。

我想尽可能多地支持浏览器。如果添加额外的属性来支持更多的浏览器,请通过添加评论来说明哪个浏览器适用于哪个浏览器。

非常感谢!

+0

甜蜜的动画! – Holf 2015-04-20 09:47:02

回答

5

您可以使用显示:表属性为此。像这样写:

.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/

0

可以使用的元素风格为

element.style { 
line-height: 13px; 
padding-top: 37px; 
height: 60px;}