html - 如何在固定高度的 <i> 标签中将图标对齐到中心

标签 html css icons font-awesome

<分区>

我尝试添加一些 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>

最佳答案

希望对您有所帮助。请检查以下代码段。

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>

关于html - 如何在固定高度的 <i> 标签中将图标对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49796802/

上一篇:javascript - 导航 - 汉堡图标未转换。可能的 CSS 或 JS 错误

下一篇:javascript - JS 和 CSS 模态弹出窗口未打开

相关文章:

javascript - 单击按钮后显示 javascript 测验

html - 如何在没有两组滚动条的 HTML 页面顶部创建非滚动 div

jquery - 有没有办法使用 jQuery animate 函数对固定位置图像进行动画处理?

java - 适用于 Android slider 菜单的 slider 图标

reactjs - 使用 SVG 的 React Icon 组件

php - 将页面从 html 转换为 php 后的位置问题

javascript - 具有绝对定位的可滚动div

html - 2 个具有最大宽度和最大高度的 Bootstrap 模态

html - <div> 中的圆孔

android - 启动器的应用程序图标 - 需要哪些可绘制尺寸