如何使用 Semantic UI 使图标在按钮内垂直居中

Question

我在项目 div 的内容 div 中添加了一个按钮。我想添加一个漂亮的 "read more" 按钮，里面有一个图标。这是我用过的代码。

<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

试试下面的方法，希望对你有用

a{
  border:1px solid blue;  
  text-decoration:none;
  padding:10px;
  display:inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
</div>

Answer 2

试试这个：

a.basic.button{
    border:1px solid #66fcf1;
    color: #66fcf1;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}
a.basic.button i{
  vertical-align: middle;
}
a.basic.button:hover{
  background:#66fcf1;
  color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<div class="content">
  <div class="extra">
    <a class="ui basic teal button" href="blogs/<%=blogs[i]._id%>">
      Read more
      <i class="fa fa-chevron-right"></i>
    </a>
  </div>
</div>

Answer 3

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

使用

i.icon {
    font-size: inherit;
}

我终于得到了这个结果：

Answer 4

使用"basic button"class

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<button class="ui basic button">
  Read more
<i class="icon angle right"></i>
</button>

如何使用 Semantic UI 使图标在按钮内垂直居中

How can I get an icon verically centered inside a button with Semantic UI

css

semantic-ui