title: vertical align link inside div
body: <p>I've created some floating buttons and a link that fills the whole button.  However, vertical alignment doesn't seem to apply - the link text always stays at the top of the button <code>&lt;li&gt;</code>.  </p>
  
  <p>Here's a fiddle example: <a href="http://jsfiddle.net/su7nf/" rel="noreferrer">http://jsfiddle.net/su7nf/</a></p>
  
  <hr>
  
  <pre><code>&lt;div id="ButtonContainer"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div class="TemplateButton"&gt;&lt;a href="http://www.google.com"&gt;Report an Issue&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="TemplateButton"&gt;&lt;a href="http://www.google.com"&gt;Contact Us&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="TemplateButton"&gt;&lt;a href="http://www.google.com"&gt;Enter Project&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="TemplateButton"&gt;&lt;a href="http://www.google.com"&gt;Request Consultation&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div class="TemplateButton"&gt;&lt;a href="http://www.google.com"&gt;How to Protect Yourself From Some Really Long Text&lt;/a&gt;&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>    ul {
          list-style-type: none;
      }
      /* BUTTONS INSIDE TAB STYLING */
  
      #ButtonContainer {
          margin: auto;
          width: 100%;
          overflow: auto;
          padding-top: 10px;
          padding-bottom: 10px;
      }
  
      #ButtonContainer &gt; ul {
              padding: 0;
              margin: 0;
      }
  
      #ButtonContainer &gt; ul &gt; li {
          display: inline-block;
          vertical-align: bottom;
      }
  
      .TemplateButton {
          overflow: auto;
          vertical-align: bottom;
      }
  
      .TemplateButton &gt; 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;
      }
  </code></pre>