时间戳

首页 > 解决方案 > Angular - 显示字体真棒微调中心不起作用

sass - Angular - 显示字体真棒微调中心不起作用

问题描述

我正在尝试在水平中心显示一个很棒的字体微调器。使用下面的 CSS，它仅显示在左侧。谁能帮我解决这个问题？

加载.component.html

<div class="container">
    <div class="loading-overlay">
        <i class="fa fa-spinner fa-spin fa-4x"></i>
    </div>
</div>

加载.component.scss

.loading-overlay {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 2;    
}

.container {
    width: 100%;
}

谢谢

标签： sassfont-awesomeangular11

解决方案

删除position: absolute;，你很好。

.loading-overlay {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 2;
}

.container {
  width: 100%;
}
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="container">
  <div class="loading-overlay">
    <i class="fa fa-spinner fa-spin fa-4x"></i>
  </div>
</div>

推荐阅读