Vertical align is not working with HTML button

Question

I´m trying to center the text in my button like reference link. But even with vertical-align: middle it is only horizontally centered. CSS looks like the following:

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button; 

  text-decoration: none;
  color: white;
  background-color: rgb(162, 0, 231);
  text-align: center;
  vertical-align: middle;
  
  width: 100%;
  height: 50px;
  border-radius: 5px;
}

And the HTML is:

<li class="row">
    <div class="content upload">
    <i class="fas fa-file-alt"></i>
    <div class="details">
        <span class="name">${fileName} • Uploaded</span>
        <span class="size">${fileSize}</span>
    </div>
    </div>
    <i class="fas fa-check"></i>
</liv>
<div>
    <a href=${signedURL} class="button"> Upload </a>
</div>

But the button looks like the following:

I´m new to HTML and CSS so that's why I´m so clueless.

Answer 1

while you could set a fixed line-height as the other answer recommended, you should use Flexbox. With that, you don't have to define fixed heights and it will work responsibly:

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: white;
  background-color: rgb(162, 0, 231);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 5px;
}

<div>
  <a href=${signedURL} class="button"> Upload </a>
</div>

Answer 2

add a line-height

a.button {
  line-height: 50px;
}