html - 响应框中的垂直对齐文本不起作用

Question

如何垂直对齐响应框中的文本？我为图像做了但它不适用于跨度，不知道为什么。下面是我完成一半的演示:

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

试试这个

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