Aligning text vertically within a link using flexbox [duplicate]

Question

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/

Answer 1

You can make your flex item a nested flex container, and then use flex properties to center the text.

In other words, apply display: flex to .flx-search-item.

.flx-search-item {
     display: flex;            /* new */
     align-items: center;      /* new */
     justify-content: center;  /* new */

     flex-grow: 1;
     text-align: center;
     /* display: block; <-- remove this */
     flex: 0 0 350px;
     height: 50px;
  }

Revised Demo

Remove display: block or it will override display: flex.

Also, flex-grow: 1 is being overridden by flex: 0 0 350px, which is the shorthand for flex-grow, flex-shrink, flex-basis.

If you want flex-grow: 1, get rid of that line and just use flex: 1 0 350px.