html - 如何在 flex div 中垂直居中字体真棒图标？

Question

如何使用“列”文本将上下排序图标垂直居中？

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  margin: 16px;
  background-color: grey;
  width: 65px;
}

.icon {
  display: flex;
  align-items: center;
  padding: 4px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />


<div class="wrapper">
  <div>Column</div>
  <div class="icon"><i class="fa fa-sort-up"></i></div>
</div>


<div class="wrapper">
  <div>Column</div>
  <div class="icon"><i class="fa fa-sort-down"></i></div>
</div>

您会注意到图标未与文本垂直对齐。我尝试了不同的方法，但没有成功。

标签： htmlcssflexboxfont-awesome

Answer 1

尝试添加更多padding或margin图标：

.icon {

  display: flex;
  align-items: center;
  padding: 10px 4px 4px 4px;
}

但如果这不起作用：

.icon {

    display: flex;
    align-items: center;
    padding: 4px;
    margin-top: 6px;
}

我希望这有帮助...