[FIXED] How do I align a CSS arrow at the vertical center of my table cell?

Issue

I have a CSS arrow and some text in a table cell ...

<td><div class="arrow-up"></div> + 1492.46</td>

How do I get the arrow to align to the left of the text and also in the vertical center of the cell? I have tried the below styling on the arrow ...

.arrow-up {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

but the arrow is still aligning above the text -- https://jsfiddle.net/s8e5k3st/ . Any suggestions for getting the proper alignment are appreciated.

Solution

Simply add display:inline-block; to arrow-up class.

.arrow-up {
  display:inline-block; /* <-- this */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
  vertical-align: middle;
}

Edited JSFiddle

Answered By - Baro

Answer Checked By - David Goodson (PHPFixing Volunteer)