Vertically centering text in a div

Question

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;

But it does not work. Any idea how I can do this?

Answer 1

Try this code:

.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;