Vertically centering text in a div

Question

https://satoshifaucet.com/satoshindex

I'm trying to vertically center the text inside the 4 divs with sat, bit, mBTC, and BTC in them. I tried doing

display:table-cell;
vertical-align:middle;

on the divs but that isn't working. Any help would be appreciated. Also the page loads slow as hell for some reason, must be all the API requests but I'm not sure. Just plain https://satoshifaucet.com loads fast.

Answer 1

He means line-height. You could always add a padding-top.

Answer 2

As makshh comment indicates line-height will be enough:

.smallUnitBox {
    background-color: #29b8ff;
    border-right: 2px solid #2098d4;
    float: left;
    height: 36px;
    width: 96px;
    line-height: 36px;
    color: white;
    font-size: 28px;
    font-family: sans-serif;
    border-bottom: 1px solid #2098d4;
}

<div class="unitBox">
  <div class="smallUnitBox">sat</div>
  <div class="smallUnitBox">bit</div>
  <div class="smallUnitBox">mBTC</div>
  <div class="smallUnitBox">BTC</div>
</div>

Don't forget to remove as it's not needed:

display:table-cell;
vertical-align:middle;