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; }
Comments
Post a Comment