Search code examples
cssimageposition

Positioning an image next to a number

I'm trying to have the number of coins right next to the image of the coins, but it always fails displaying them right next to 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 at some point I managed to get them next to eachother, but then it was impossible to move the letter up/down without also moving the image.. Now I'm back stuck to the first problem..

Solution

  • You just 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