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.

Here's what I have so far:

```
.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;
}

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

```

JSfiddle: <https://jsfiddle.net/c60t2r2k/>