css - 将图像放置在数字旁边

我正在尝试在硬币图像旁边放置硬币数量，但始终无法在彼此旁边显示硬币

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;
}

在某个时候，我设法使它们彼此相邻，但是在不移动图像的情况下就不可能上下移动字母。
现在我回到第一个问题了。

最佳答案

您只需要verical-align css规则：

.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 - 将图像放置在数字旁边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26864307/