Aligning text vertically within a link using flexbox
<p>I'm trying to create 3 buttons that are side by side at the top of my page. When the page gets smaller they should stack. So far that's fine. I have my buttons. I'm trying to set the height of the buttons to 50px max when full-screen. The problem is when I set my height, the text in my buttons don't center vertically.</p>

<p>Here's what I have so far:</p>

<pre><code>.flx-search {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: center;
  align-items:center;


  width:1060px;
  color:#ffffff;
}

.flx-search-item {
  flex-grow:1;
  text-align:center;
  display:block;
  flex: 0 0 350px;
  height:50px;
}

&lt;div style="background-color:#34495e;display:flex; justify-content:center;"&gt;
  &lt;div class="flx-search"&gt;
     &lt;a class="flx-search-item"&gt;Search Our Catalog&lt;/a&gt;
     &lt;a class="flx-search-item"&gt;View Patron Record&lt;/a&gt;
     &lt;a class="flx-search-item"&gt;Register for Programs&lt;/a&gt;  
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JSfiddle: <a href="https://jsfiddle.net/c60t2r2k/" rel="nofollow noreferrer">https://jsfiddle.net/c60t2r2k/</a></p>