Vertical align text within a responsive box doesn't work

Question

How do I vertical align the text within a responsive box? I did for the image but it doesn't work for span, not sure why. Below is my half way done demo :

img{
    width:20px;
}

div{
    width:100px;
    height:100px;
    background:#ddd;
    padding:10px;
}

img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div>
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/256/football.png"/>
    <span>football</span>
</div>

Answer 1

Try This

img{
    width:20px;
    padding:2px;
}

div{
    width:100px;
    height:100px;
    background:#ddd;
    padding:10px;
}

img,span{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    float: left;
}

Demo Here