title: Vertically align text to middle of inline-block
body: <p>I am trying to get text to vertically align to the middle but can't seem to get it to work.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;a href="#" class="custom-button width-100"&gt;Login&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;a href="#" class="custom-button width-100"&gt;Menu&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;a href="#" class="custom-button width-100"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.custom-button {
  color:#ECDBFF;
  background-color:#4F0100;
  display:inline-block;
  height: 220px;
  font-family:Verdana, Geneva, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  }
  
  .width-100 {width: 100%;}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1KHnQ.png" alt="How it looks at the moment"></p>
  
  <p>I have googled quite a bit and tried a couple of things but i can't seem to get the text to go to the middle. can anyone advise what i would need to add/change to get this to work.</p>