在锚标记内垂直对齐文本

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