时间戳

首页 > 解决方案 > 圆圈内的图标未对齐中心，浏览器上的水平和垂直对齐正确 < 100%

html - 圆圈内的图标未对齐中心，浏览器上的水平和垂直对齐正确 < 100%

问题描述

我正在使用 icoMoon 字体（https://icomoon.io/）并在圆圈内水平和垂直居中对齐。它在 100% 和 80% 的浏览器中处于中心位置，但当 < 80% 时，图标未正确对齐。类似情况，> 100% 的浏览器（chrome）；

附上截图：-

在此处输入图像描述

在此处输入图像描述

.uniIcon {
  height: 18px;
  width: 18px;
  line-height: 18px;
  border-radius: 100%;
  text-align: center;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.iconmoon-icon-files {
  font-size: 12px;
  color: #FFF;
  vertical-align: sub;
  padding-left: 1px;
}
<div class="uniIcon" style="background-color: #161620;"><i class="iconmoon-icon-files"></i></div>

标签： htmlcssresponsive-design

解决方案

尝试为图标设置行高以在 div 中心对齐它们，例如

.iconmoon-icon-files {
  font-size: 12px;
  color: #FFF;
  line-height:inherit;
}

继承将使图标的 line-height 采用其包含 div 的高度。

推荐阅读