将 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."

这似乎是合适的选择。

将 fontawesome 图标与 flexbox 垂直对齐

Vertically align fontawesome icon with flexbox

css

vertical-alignment

font-awesome