Question

我试图在硬币图像旁边放置硬币数量，但它总是无法在彼此旁边显示它们

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

在某些时候我设法将它们放在彼此旁边，但是如果没有移动图像就不可能上下移动信件。现在我又回到了第一个问题......

Answer 1

您只需要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

Answer 2

使用float概念。这将为您在这些场景中提供更大的灵活性。

http://jsfiddle.net/kiranvarthi/kr8bx9x9/

.coins{
  text-align:center;
  font-size:35px;
  padding-top:15px;
}
.cointextfix{
  margin-top:0;
  padding-top:0;
  width:50px;
  height:40px;
  float: left;
  background-color:green;
}
.coinimgfix{
  background-image:url("http://i.imgur.com/h6aT9TJ.png");
  margin-top:0;
  padding-top:0;
  width:50px;
  height:40px;
  float: left;
  background-color:blue;
}

将图像定位在数字旁边

2 个答案:

Codepen