html - Vertical align text within a responsive box doesn't work -


how vertical align text within responsive box? did image doesn't work span, not sure why. below 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>

try

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


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -