在按钮内对齐文本和图像

Question

我需要创建一个“喜欢”按钮。但是，我无法使我的文本和图像在中心对齐。此外，响应式布局问题也让我感到困扰。

也许我做的太复杂了，希望有人能够简化并解释给我。但是，我希望这个按钮能够随着百分比缩放以适应响应式布局。

以下是我想要的效果：

而下面是我目前拥有的效果：

    .kom_augsha .treshais{
     width:15%;
     float:right;
    }
    
    .reitings{
      display:table;
      width: 100%;
      border: 1px solid #e9e9e9;
      
    }
    
    .rate {
      display: table-cell;
      text-align: center;
      vertical-align:middle;
      line-height: 1.5em;
    }
    
    .plus {
      background: white;
      color: green;
    }
    
    .minus{
      background: white;
      color: red;
      border-left: 1px solid #e9e9e9;
      padding-left:10px;
      text-align:center;
    }

<div class="treshais">
  <div class="reitings">
    <div class="rate plus"><img src="plus.jpg"/>83</div>
    <div class="rate minus"><img src="minus.jpg"/>9</div>
  </div>
</div>

- Roberts Šensters

---

你应该将 vertical-align: middle 应用于图片！ - Aaron

Answer 1

您可以使用以下方法：

.rate img {vertical-align: middle;}

- Praveen Kumar Purushothaman

Answer 2

.rate img {
    vertical-align: middle;
    display: inline-block;
}

- Izan

---

欢迎来到StackOverflow，Rizwan Iswon！请尽量避免仅发布一小段代码，同时也要解释它的工作原理以及输出结果会如何，特别是与原帖示例的比较。 - maj