css - 将 fontawesome 图标与 Flexbox 垂直对齐

Question

我不想在列表项内垂直对齐图标。我尝试了一些方法，但我不知道如何将图标正确对齐到中心。这是在下面的示例中最明显的，带有箭头图标，靠近关闭图标。有什么想法吗？

li {
  display: flex;
}

.fa {
  flex-grow: 0;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.title {
  flex-grow: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
  <ul>
    <li>
        <span class="fa fa-ellipsis-v"></span>
        <span class="fa fa-eye"></span>
        <span class="title">Item 1</span>
        <span class="fa fa-sort-down"></span>
        <span class="fa fa-times"></span>
    </li>
    <li>
        <span class="fa fa-ellipsis-v"></span>
        <span class="fa fa-eye"></span>
        <span class="title">Item with long title</span>
        <span class="fa fa-sort-down"></span>
        <span class="fa fa-times"></span>
    </li>
  </ul>

Answer 1

本质上，你不能...某些字形未在其边界字体框中居中。

如果在图标周围添加边框，您就可以看到这一点。

这是无法用 Flexbox 纠正的。

li {
  display: flex;
  align-items: center;
}

.fa {
  flex-grow: 0;
  display: flex;
  border: 1px solid grey;
}

.title {
  flex-grow: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item 1</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
  </li>
  <li>
    <span class="fa fa-ellipsis-v"></span>
    <span class="fa fa-eye"></span>
    <span class="title">Item with long title</span>
    <span class="fa fa-sort-down"></span>
    <span class="fa fa-times"></span>
    <span class="fa fa-caret-down"></span>
  </li>
</ul>

正如您自己所指出的

"There is a fa-caret-down icon, which is properly centered."

这似乎是合适的选择。