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

Popular posts from this blog

maven fortify plugin : Unable to load build session with ID XXXXX .. See log file for more details -

maven fortify plugin : Unable to load build session with ID XXXXX .. See log file for more details - i took refrence : generating fortify study in maven but invoking : mvn sca:scan throws below error : unable load build session id xxxxx .. see log file more details. [error] error invoking sourceanalyzer. exit code: 1. verify project settings , sca installation. i tried looking around various posts , no luck. could please advise. directly running "mvn sca:scan" not work. next needs executed before "mvn sca:scan"" mvn sca:translate plugins fortify sca
Read more

c# - Primavera WebServices does not return any data -

c# - Primavera WebServices does not return any data - i using primavera webservices (version 6.2.1) read info primavera database (sqlserver 2008r2) in winform application (c#). utilize http cookie container authentication mode. before moved database new server able login , read info primavera database when moved db (using backup , restore), can still login db primavera webservices homecoming null request. this code login: authenticationservice authservice = new authenticationservice( ); authservice.cookiecontainer = new system.net.cookiecontainer( ); authservice.url = _p6wsauthenticationservice; login loginobj = new login( ); loginobj.username = pv_username; loginobj.password = pv_password; loginobj.databaseinstanceid = 1; loginobj.databaseinstanceidspecified = true; loginobj.verbosefaults = true; loginobj.verbosefaultsspecified = true; loginresponse loginreturn = authservice.login( loginobj ); readdatabaseinstancesresponsedatabaseinstance[] rea...
Read more

android - Display emoji panel with genymotion - keyboard/touch input? -

android - Display emoji panel with genymotion - keyboard/touch input? - i seek no luck open panel emoji icons cannot find if possible on genymotion (?) input keyboard. regards go settings->language , input->current keyboard turn on "show input method" switch. this cause keyboard appear on screen when input text, way android works on device doesn't have hardware keyboard. can utilize input emoji. if there's improve way, or way, don't know it. android android-emulator avd genymotion emoji
Read more