Vertically centering with Flex, set a height, used Align-items, still not centering

Question

I've read the techniques but after an hour and a half I can't figure out what's wrong.
Am I missing a position?
Why won't the text center vertically?

.subscribe-btn {
  display: flex;
  margin: 0.5em;
  width: 290px;
  height: 50px;
  background-image: linear-gradient(#4968b0, #3d559e);
  border-radius: 20px;
  cursor: pointer;
  border-style: outset;
  justify-content: center;
  text-align: center;
}

.subscribe-btn a {
  font-weight: bold;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

<div class="subscribe-btn">
    <a href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>
</div>

I've been using combinations of aligning in both the parent and child, trying different displays in the parent and child.

Answer 1

Ok, so first of all you should not be using a div at all for a link you want to look like a button. You only need the tag that you will style to look like a button. Having the div be a part of the button in this case is needless and not semantic. So get rid of that by applying the button class to the element.

<a class="subscribe-btn" href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>

Then you can simply combine the styles and add align-items: center to the styles and you will get what you are looking for. Since you are using flex, you can also get rid of text-align: center.

.subscribe-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  margin: 0.5em;
  width: 290px;
  height: 50px;
  background-image: linear-gradient(#4968b0, #3d559e);
  border-radius: 20px;
  cursor: pointer;
  border-style: outset;
  font-weight: bold;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

<a class="subscribe-btn" href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>

But honestly unless you need all the buttons the exact same size, it would probably be better to not use flexbox at all and instead set display: inline-block and use padding instead of explicit height/width. Also use rem or em units instead of px units for the font-size and the padding. Like this:

.subscribe-btn {
  display: inline-block;
  margin: 0.5em;
  padding: 0.75rem 1.25rem;
  background-image: linear-gradient(#4968b0, #3d559e);
  border-style: outset;
  border-radius: 20px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  vertical-align: middle;
}

<a class="subscribe-btn" href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>

Answer 2

You would need align-items: center; instead of justify-content.

You can get rid of justify-content since you are centrering horizontally using text-align: center;

Answer 3

You need to add align-items:center;

.subscribe-btn {
  display: flex;
  margin: 0.5em;
  width: 290px;
  height: 50px;
  background-image: linear-gradient(#4968b0, #3d559e);
  border-radius: 20px;
  cursor: pointer;
  border-style: outset;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.subscribe-btn a {
  font-weight: bold;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

  <div class="subscribe-btn">
    <a href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>
</div>

Answer 4

Please add:

.subscribe-btn{
/*Other attributes*/
align-items:center;
}

Answer 5

It looks like you're using the wrong property. In flexbox, justify-content property is used to align items on the main axis (horizontally), while the align-items property is used to align items on the cross axis (vertically). So from your styling, you're only aligning the items on the main axis, and not on the cross axis as well.

To fix the issue you're having, you just need to add the align-items: center property to your .subscribe-btn style class. Your updated code should look like this below:

.subscribe-btn {
    display: flex;
    margin: 0.5em;
    width: 290px;
    height: 50px;
    background-image: linear-gradient(#4968b0, #3d559e);
    border-radius: 20px;
    cursor: pointer;
    border-style: outset;
    justify-content: center;
    align-items: center; // aligns item on the cross axis (vertically)
    text-align: center;
}

You can read more here MDN documentation on Aligning items in a flexbox container. Let me know if it works.