css - 如何使用语义 UI 在按钮内垂直居中的图标

Question

我在元素 div 内的内容 div 中添加了一个按钮。我想添加一个漂亮的“阅读更多”按钮，里面有一个图标。这是我用过的代码。

<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="chevron right icon"></i>
    </a>
  </div>
</div>

这会导致按钮的图标未垂直居中，如下所示。

Answer 1

我无法从其他答案中解决问题，但它让我意识到是字体大小的差异导致图标偏心。

使用

i.icon {
    font-size: inherit;
} 

我终于得到了这个结果: