html - CSS 将中心 Font Awesome 图标垂直对齐到文本

标签 html css fonts sass font-awesome

我被卡住了,无论 <a> 是什么,我怎样才能使箭头垂直居中?标签字体大小是?

body {
  font-family: Arial, 'sans-serif';
}

a {
  font-weight: 500;
  font-size: 30px;
  color: #000;
}

i {
  font-size: 12px !important;
  font-weight: 300;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>

最佳答案

使用 i { vertical-align: middle; }

body {
  font-family: Arial, 'sans-serif';
}

a {
  font-weight: 500;
  font-size: 30px;
  color: #000;
}

i {
  font-size: 12px !important;
  font-weight: 300;
  vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <a href="#">View Full Chart <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>

关于html - CSS 将中心 Font Awesome 图标垂直对齐到文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45097096/

相关文章:

javascript - 无法在图像上动态添加文字

jquery - 用通知覆盖多个 DIV/Cells

javascript - 如何在 react 中将组件引用传递给路由组件

html - Overflow-y auto 在这种情况下不起作用

html - 响应式 <li> 占用空间

java - 光栅化 Java 字体

Android 自定义字体未正确映射

pdf - 使用具有可靠字体选择的 ImageMagick 将 SVG 转换为 PDF?

javascript - 使用 JS onclick 的下拉菜单 - 有什么问题?

html - 即使 child 没有高度,父 div 的高度也会扩大