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

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

font-awesome icons css html

Mav · 技术社区 · 6 年前

我试着添加一些 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 回复 | 直到 6 年前

Anmol Sandal 6 年前

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

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

试试这个

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

Renzo Calla 6 年前

您可以使用表格单元格和垂直居中对齐使用此选项的优点是旧浏览器支持表格单元格属性。。。其他解决方案是使用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 6 年前

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

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

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

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

-1

Nidhi 6 年前

您可以按以下方式更改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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前