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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -