代码之家 › 专栏 › 技术社区 › Mav

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

font-awesome icons css html

Mav · 技术社区 · 7 年前

我试着添加一些 padding-top ,但有没有办法实现自动化?我找不到任何类似的问题。

i{
  background: red;
  height: 100px;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

5 回复 | 直到 7 年前

Anmol Sandal 7 年前

希望这对你有所帮助。请检查下面的代码片段。

i{
  background: red;
  height: 100px;
  position: relative;
}

i:before {
position: relative;
top: 50%;
    transform: translateY(-50%);
    display: block;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

Rakesh Shriwas 7 年前

试试这个

i {
    background: red;
    height: 100px;
    display: flex !important;
    flex-flow: row wrap;
    width: 20px;
    justify-content: center;
    align-items: center;
    padding: 0;
}

Renzo Calla 7 年前

您可以使用表格单元格和垂直居中对齐使用此选项的优点是旧浏览器支持表格单元格属性。。。其他解决方案是使用flexbox。。

i{
  background: red;
  height: 100px;
}
i.fa {
display:table-cell;
vertical-align: middle;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

Tanveer Ahmad 7 年前

无需增加高度。您可以应用以下css:

i{
  background: red;
  padding:8px;
}

如果您想保持高度,可以使用以下方法:

i{
     background: red;
     height:100px;
     display: table-cell !important;
     vertical-align: middle;
 }

-1

Nidhi 7 年前

您可以按以下方式更改CSS:

i{
  background: red;
  height: 100px;
}
i:before{
  display: inline-block;
  margin: 40px 0;
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>

推荐文章

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

2 年前

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 年前