代码之家 › 专栏 › 技术社区 › Runtime Terror

垂直对齐fontawesome图标和flexbox

vertical-alignment font-awesome css

Runtime Terror · 技术社区 · 7 年前

我不想在列表项中垂直对齐我的图标我试过一些方法,但我不知道如何正确地将图标与中心对齐。这是下面示例中最明显的箭头图标,靠近“关闭”图标。有什么想法吗?

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>

1 回复 | 直到 7 年前

××× × ×××× 7 年前

基本上, 你不能 …有些符号不是 居中的 在它们的边界字体框中。

如果在图标周围加上边框,就可以看到这一点。

这不能用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>

正如你所注意到的

“有一个 fa-caret-down 图标,正确居中。“

这似乎是一个合适的选择。

推荐文章

Simon · 使用React更改字体可怕图标的颜色

3 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

7 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

7 年前

Pranta Saha · 为什么Font Awesome图标类不同

7 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

7 年前

LP13 · 在中心对齐定位标记内的内容

7 年前

Fjott · CSS-居中字体超级图标

7 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

7 年前

Tithos · 品牌FA5图标不工作

7 年前

SuperUberDuper · 字体awesome在加载之前显示方块

7 年前