如何将图标与固定高度的<i>标签中的中心对齐

时间:2018-04-12 12:38:34

标签: html css icons font-awesome

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

&#13;
&#13;
i{
  background: red;
  height: 100px;
}
&#13;
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:0)

试试这个

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

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

答案 1 :(得分:0)

希望这会帮助你。请查看以下代码段。

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

i:before {
position: relative;
top: 50%;
    transform: translateY(-50%);
    display: block;
}
&#13;
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />

<i class="fa fa-link"></i>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你可以使用表格单元格和垂直对齐中间使用这个的优点是旧的浏览器支持table-cell属性...其他解决方案将使用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>

答案 3 :(得分:0)

无需增加身高。你可以申请以下css:

choices: 'HappyFlow\nNewYork_HappyFlow' 

如果你想保持高度,你可以使用以下:

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

答案 4 :(得分:-1)

您可以像下面那样更改CSS:

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