ローテーションイメージの下にテキストを表示する方法

Question

ローディングイメージの下にテキストを表示したいのですが、テキストは別のブラウザで別の位置に配置されています。私はChromeとIEブラウザの下

のスクリーンショットを添付している私は

.LoaderwithText { 
 
    position: fixed; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    top: 50%; 
 
    left: 50%; 
 
    white-space: nowrap; 
 
} 
 

 
.loader { 
 
    border: 12px solid #f3f3f3; 
 
    /* Light grey */ 
 
    border-top: 12px solid #3498db; 
 
    /* Blue */ 
 
    border-radius: 50%; 
 
    width: 80px; 
 
    height: 80px; 
 
    -ms-animation: spin 2s linear infinite; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    -o-animation: spin 2s linear infinite; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
} 
 

 
#LoaderText { 
 
    Color: black; 
 
    font-size: 14px; 
 
} 
 

 

 
@keyframes spin { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 

 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(-360deg); 
 
    } 
 
}

<div class="LoaderwithText"> 
 
    <a class="loader"></a> 
 
    <p id="LoaderText">Deleting...</p> 
 
</div>

私のスタイルで行方不明です何を使用しているHTML、それはすべてのブラウザで動作させる必要がありますです。

IE

Chrome

Answer 1

あなたがflexを使用している場合は、その内容を中心に大きさの容器を必要とする：彼らは静的を持っている場合

Absolute要素もcoordonatesとmarginを経由してセンタリングすることができますサイズ。

.LoaderwithText { 
 
    position: fixed; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    white-space: nowrap; 
 
    /* update*/ 
 
    top: 0; 
 
    left: 0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.loader { 
 
    border: 12px solid #f3f3f3; 
 
    /* Light grey */ 
 
    border-top: 12px solid #3498db; 
 
    /* Blue */ 
 
    border-radius: 50%; 
 
    width: 80px; 
 
    height: 80px; 
 
    -ms-animation: spin 2s linear infinite; 
 
    -webkit-animation: spin 2s linear infinite; 
 
    -o-animation: spin 2s linear infinite; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    /* update*/ 
 
    top:0; 
 
    left:0; 
 
    bottom:0; 
 
    right:0; 
 
    margin:auto; 
 
} 
 

 
#LoaderText { 
 
    Color: black; 
 
    font-size: 14px; 
 
} 
 

 

 
@keyframes spin { 
 
    0% { 
 
     transform: rotate(0deg); 
 
    } 
 

 
    100% { 
 
     transform: rotate(360deg); 
 
    } 
 
} 
 
@-webkit-keyframes spin { 
 
    0% { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(-360deg); 
 
    } 
 
}

<div class="LoaderwithText"> 
 
    <a class="loader"></a> 
 
    <p id="LoaderText">Deleting...</p> 
 
</div>