CSS 垂直对齐锚标签内的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15463247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically alignment text within anchor tag
提问by FosAvance
Everything works, text is in the middle of an anchor. Whole ul tag is in the middle of the page, but this is only problem. When text is little bit longer it breaks and my anchor tag goes up, I'm not sure what is the problem. check it live and mojgolub(.)com
一切正常，文本位于锚点的中间。整个 ul 标签都在页面中间，但这只是问题。当文本稍长时它会中断并且我的锚标记上升，我不确定是什么问题。检查现场和 mojgolub(.)com
HTML
HTML
<div id="speeddial-wrapper">
<nav>
<ul>
<li> <a href="#" class="speeddial" id="s1">POPIS GOLUBOVA</a> </li>
<li> <a href="#" class="speeddial" id="s2">POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</a></li>
<li> <a href="#" class="speeddial" id="s3">POPIS GOLUBOVA></a></li>
<li> <a href="#" class="speeddial" id="s4">POPIS GOLUBOVA</a> </li>
<div style="clear:both; margin-top:25px;"></div>
<li> <a href="#" class="speeddial" id="s1">POPIS GOLUBOVA</a> </li>
<li> <a href="#" class="speeddial" id="s2">POPIS GOLUBOVA MALO VECI TEKST NEGO UOBICAJENO</a></li>
<li> <a href="#" class="speeddial" id="s3">POPIS GOLUBOVA></a></li>
<li> <a href="#" class="speeddial" id="s4">POPIS GOLUBOVA</a> </li>
</ul>
</nav>
</div>
CSS
CSS
#speeddial-wrapper
{
width:90%;
margin:0 auto;
margin-top:30px;
text-align:center;
}
#speeddial-wrapper nav ul
{
list-style-type:none;
margin:0;
padding:0;
}
#speeddial-wrapper nav ul li
{ display:inline-table;
}
.speeddial
{
font-family:speeddialfont;
color:#FFFFFF;
text-align:center;
text-decoration:none;
height:200px;
width:200px;
border:7px solid #AEAEAE;
background-color:#49A655;
border-radius:5px;
display:table-cell;
vertical-align:middle;
margin-right:30px;
margin-bottom:30px;
}
采纳答案by Bigood
Change the display
改变 display
#speeddial-wrapper nav ul li
{
display:inline-table;
}
to
到
#speeddial-wrapper nav ul li
{
display:inline-block;
}
回答by ryan
Add this rule
添加此规则
#speeddial-wrapper nav ul li { vertical-align: middle; }
