Vertically alignment text within anchor tag

Question

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

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

Change the display

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

to

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

Answer 2

Add this rule

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