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

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

font-awesome icons css html

Mav · 技术社区 · 8 年前

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

Anmol Sandal 8 年前

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

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

试试这个

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

Renzo Calla 8 年前

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

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

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

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

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

-1

Nidhi 8 年前

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前