html - 将 app-root 中的 gif 中心与 Angular 中的中心对齐

Question

如何将包含在中间的 gif 微调器对齐。我尝试使用 CSS，但它仍然停留在右上角(默认)位置。无论。我想让它出现在屏幕中央

<app-root>
  <div class="loading">
    <div class="loading-img"><img src="./assets/images/loading.gif"></div>
    <h1 style="right: 10px">Loading...</h1>
  </div>
</app-root>

.loading
{
 margin:auto;
}

Answer 1

查看此链接:https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/

基本上使用绝对定位将图像与屏幕的中心点对齐。然后使用 top 和 left css 属性将图像向上和向左偏移。

html { 
   width:100%; 
   height:100%; 
}

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 250px;
   margin-top: -175px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

<div id="body">
 <img src="https://i.kym-cdn.com/entries/icons/original/000/023/397/C-658VsXoAo3ovC.jpg" />
</div>

在您的情况下，您没有使用图像，但这个概念仍然适用。您可以使您的加载 div 成为绝对的，并将其放置在您的应用程序中您想要的任何位置。

根据 Angular - 我认为您在将微调器放入 AppComponent 方面走在正确的轨道上。这似乎是一个很好的地方。

您还可以订阅路由器事件，并在您的应用程序开始导航到新页面时启动微调器。

constructor(private _router: Router) {
   this._router.events.subscribe(event => {
      if (event instanceof NavigationStart)
          // turn on spinner
      else if (event instanceof NavigationEnd)
         // turn off spinner
   });
}