將應用程序根目錄中的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-horizo​​ntal-an-image/

基本上使用絕對定位將圖像與屏幕中心對齊。 然后使用頂部和左側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設為絕對，並將其放置在應用程序中的任何位置。

按照角度-我認為您在將微調器放入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
   });
}