css - Positioning an image next to a number -
css - Positioning an image next to a number -
i'm trying have number of coins right next image of coins, fails displaying them right next eachother
live example:
html:
<div class="coins"> <div class="cointextfix">5</div> <div class="coinimgfix"></div> </div>
css:
.coins{ text-align:center; font-size:35px; padding-top:15px; } .cointextfix{ display:inline-block; margin-top:0px; padding-top:0px; width:50px; height:40px; background-color:green; } .coinimgfix{ background-image:url("http://i.imgur.com/h6at9tj.png"); display:inline-block; margin-top:0; padding-top:0; width:50px; height:40px; background-color:blue; }
and @ point managed them next eachother, impossible move letter up/down without moving image.. i'm stuck first problem..
you need verical-align
css rule:
.cointextfix{ display:inline-block; margin-top:0; padding-top:0; width:50px; height:40px; background-color:green; vertical-align:middle; /* added */ } .coinimgfix{ background-image:url("http://i.imgur.com/h6at9tj.png"); display:inline-block; margin-top:0; padding-top:0; width:50px; height:40px; background-color:blue; vertical-align:middle; /* added */ }
codepen css image position
Comments
Post a Comment