Aligning text vertically within a link using flexbox

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/

Michael Benjamin · Accepted Answer · 2017-08-29T11:06:59.403

4

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.

edited Aug 29 '17 at 11:06

answered Jan 20 '16 at 17:36

Michael Benjamin

346,931
104
581
701

I applied it, but 1 thing. Is there a way to make the height scale as the page shrinks? – Damien Jan 20 '16 at 18:54
For the scaling, yes. You could use [**viewport units**](https://css-tricks.com/viewport-sized-typography/). For the hovering, you were targeting the wrong parent: [**DEMO**](https://jsfiddle.net/c60t2r2k/3/) (re-size window horizontally for scaling effect; hovering works). – Michael Benjamin Jan 20 '16 at 19:05
Thanks a lot, i was just wondering if there was a way to do it without media queries – Damien Jan 20 '16 at 19:07
As you can see, no media queries :-) – Michael Benjamin Jan 20 '16 at 19:07
i mean for the height resizing of the items. they are 50px... they don't change with scale – Damien Jan 20 '16 at 19:08
You could also use viewport units on the flex items. https://jsfiddle.net/c60t2r2k/4/ – Michael Benjamin Jan 20 '16 at 19:11
1

Thanks for all your help! – Damien Jan 20 '16 at 19:24

Simon Hi · Answer 2 · 2016-01-20T18:08:14.057

0

Just add a line-height:50px; to .flx-search-item.

EDIT (sample with @media query) :

.flx-search-item {
     text-align: center;
     flex: 0 0 350px;
     height: 50px;
     line-height: 50px;
}

@media (max-width:1065px) {
    .flx-search-item
    {
        flex: 0 0 700px;
    }
}
@media (max-width:710px) {
    .flx-search-item
    {
        flex: 0 0 350px;
    }
}

edited Jan 20 '16 at 18:08

answered Jan 20 '16 at 17:30

Simon Hi

2,838
1
17
17

problem with that is when it shrinks, the height remains 50px instead of shrinking and the text becomes off centered vertically – Damien Jan 20 '16 at 17:31
Ok. In fact, it seems that all three buttons are centered vertically, but displayed on 2 lines when available space is between 700 and 1050px. You can use @media query to solve this case. – Simon Hi Jan 20 '16 at 17:38

Aligning text vertically within a link using flexbox

2 Answers2