CSS、角度2のオーバーレイの中に縦方向のテキストを配置する方法

Question

私は、スピナー（角のあるコンポーネント）とテキストを表示するために使用されるオーバーレイを持っています。このオーバーレイはページ上にあり、下の要素をクリックすることはできません。

スピナーはページの中央にあります。スピンナーはページの中央にあり、「ローディング」テキストをスピナーの下端に垂直に並べ、勿論水平になるようにします。ここ

は私のHTMLコードとCSSスタイルです：

<div id="overlay" [style.display]="this.showOverlay"> 
    <div id="overlay-spinner"> 
     <mat-spinner [diameter]="80" color="accent"></mat-spinner> 
    </div> 
    <div id="overlay-text"> 
     <span>Loading ...</span> 
    </div> 
</div> 


#overlay { 
    position: fixed; /* Sit on top of the page content */ 
    display: none; /* Hidden by default */ 
    width: 100%; /* Full width (cover the whole page) */ 
    height: 100%; /* Full height (cover the whole page) */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */ 
    z-index: 1; /* Specify a stack order in case you're using a different 
    order for other elements */ 
    cursor: default; /* Add a pointer on hover */ 
} 

#overlay-spinner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

#overlay-text { 
    position: absolute; 
    top: 65%; 
    left: 50%; 
    font-size: 40px; 
    color: white; 
    transform: translate(-65%,-50%); 
    -ms-transform: translate(-65%,-50%); 
} 

ものは角度コードであるため、あなたがタグ内の[]の属性を気にする必要がありません。それらは、スピナープロパティを設定するため、またはオーバーレイ全体を表示するために使用されます。

私はポジションアブソリュート、上部65％、左50％で試しましたが、スピナーとテキストがうまく整列していません。どのようにできるのか ？

Answer 1

私はあなたのベストショットがディスプレイであると信じています：オーバーレイの方向とアライメントでフレックスします（下のスニペットを参照）。フレックスでは、より多くを読むことができますhere in this非常に包括的かつ素晴らしいガイド。私はこれがあなたが達成しようとしていたものだといいですね！

PS：私は「...」 『ロード』の終わりに、それは

PS2：あなたの目のトリックにあなたを聞かせてはいけません表示されていることを確認するには「スピナーが、ここでは」使用実際には右のスピナーテキスト

#overlay { 
 
    position: fixed; 
 
    display: flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    flex-direction:column; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: rgba(0,0,0,0.5); 
 
    z-index: 1; 
 
    cursor: default; 
 
} 
 

 
#overlay-text { 
 
    font-size: 40px; 
 
    color: white; 
 
}

<div id="overlay" [style.display]="this.showOverlay"> 
 
    <div id="overlay-spinner"> 
 
    <p>spinner is here</p> 
 
    </div> 
 
    <div id="overlay-text"> 
 
     <span>Loading ...</span> 
 
    </div> 
 
</div>

Answer 2

の下中央に配置され、私は自分のオーバーレイ・スピナーのdivにあなたのロードテキストを配置します。

<div id="overlay" [style.display]="this.showOverlay"> 
 
    <div id="overlay-spinner"> 
 
     <mat-spinner [diameter]="80" color="accent"></mat-spinner> 
 
     <span id="overlay-text">Loading ...</span> 
 
    </div> 
 
</div> 
 

 

 
#overlay { 
 
    position: fixed; /* Sit on top of the page content */ 
 
    display: none; /* Hidden by default */ 
 
    width: 100%; /* Full width (cover the whole page) */ 
 
    height: 100%; /* Full height (cover the whole page) */ 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */ 
 
    z-index: 1; /* Specify a stack order in case you're using a different 
 
    order for other elements */ 
 
    cursor: default; /* Add a pointer on hover */ 
 
} 
 

 
#overlay-spinner { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
} 
 

 
#overlay-text { 
 
    font-size: 40px; 
 
    color: white; 
 
}