вертикальный выровнять ссылку внутри div

Question

Я создал несколько плавающих кнопок и ссылку, которая заполняет всю кнопку. Однако вертикальное выравнивание, похоже, не применяется - текст ссылки всегда остается в верхней части кнопки <li>.

Вот скрипку пример: http://jsfiddle.net/su7nf/

---

<div id="ButtonContainer"> 
    <ul> 
     <li> 
      <div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div> 
     </li> 
     <li> 
      <div class="TemplateButton"><a href="http://www.google.com">Contact Us</a></div> 
     </li> 
     <li> 
      <div class="TemplateButton"><a href="http://www.google.com">Enter Project</a></div> 
     </li> 
     <li> 
      <div class="TemplateButton"><a href="http://www.google.com">Request Consultation</a></div> 
     </li> 
     <li> 
      <div class="TemplateButton"><a href="http://www.google.com">How to Protect Yourself From Some Really Long Text</a></div> 
     </li> 
    </ul> 
</div> 

---

ul { 
     list-style-type: none; 
    } 
    /* BUTTONS INSIDE TAB STYLING */ 

    #ButtonContainer { 
     margin: auto; 
     width: 100%; 
     overflow: auto; 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 

    #ButtonContainer > ul { 
      padding: 0; 
      margin: 0; 
    } 

    #ButtonContainer > ul > li { 
     display: inline-block; 
     vertical-align: bottom; 
    } 

    .TemplateButton { 
     overflow: auto; 
     vertical-align: bottom; 
    } 

    .TemplateButton > a { 
     width: 119px; 
     height: 119px; 
     padding: 15px; 
     float: left; 
     background-color: pink; 
     margin-left: 3px; 
     margin-right: 3px; 
     vertical-align: bottom; 
     text-align: center; 
     font-size: 1.25em; 
     border: 1px solid white; 
     border-radius: 15px; 
     -moz-border-radius: 15px; 
    } 

Answer 1

В ваших тегах a используется table-cell вместо float и изменить вертикальное выравнивание по middle:

.TemplateButton > a { 
    /*float: left; Remove this*/ 
    display:table-cell; /*Add this*/ 
    vertical-align:middle; /*Change to middle*/ 
} 

Проверить это Demo Fiddle

Answer 2

Установите якоря line-height к тому, что в DIV, или установите его в display: block в противном случае ваши значения ширина/высота не будет работа