Vertical Aligning Text Using CSS

I had to vertically align several lines of text so after not finding a CSS only solution anywhere on the internet I decided to have an experiment. As I was doing this for mobile this was only tested in webkit.

Firstly build your layout how you want with the text in the box you want to vertically align your text within.

Wrap your text in a span and use the following CSS, updating the height with the height of the container.

span{
display:table-cell;
vertical-align:middle;
height:50px;
}

Your text should now be vertically aligned