css - 锚标记内的垂直对齐文本

Question

一切正常，文本位于锚点中间。整个 ul 标记在页面中间，但这只是问题。当文本稍长一点时，它会中断并且我的锚标记上升，我不确定是什么问题。检查现场和 mojgolub(.)com

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

#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;
}

Answer 1

更改display

#speeddial-wrapper nav ul li
{  
    display:inline-table;
}

至

#speeddial-wrapper nav ul li
{   
    display:inline-block;
}

Answer 2

添加此规则

#speeddial-wrapper nav ul li { vertical-align: middle; }