锚标记内的垂直对齐文本答案

【问题标题】：Vertically alignment text within anchor tag锚标记内的垂直对齐文本
【发布时间】：2013-03-05 23:42:48
【问题描述】：

一切正常，文本位于锚点中间。整个 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;
}

【问题讨论】：

标签： css vertical-alignment alignment

【解决方案1】：

更改display

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

到

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

【讨论】：

我不敢相信这是唯一的错误

【解决方案2】：

添加这条规则

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

【讨论】：