如何文本添加到加載圖標CSS

Question

我有CSS，顯示加載圖標頁面上像下面

#loading { 
     display: block; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     background-image: 'icon.gif'; 
     background-position: center; 
     background-repeat: no-repeat; 
     z-index: 1000; 
    } 

如何添加上述加載圖標文本例如「加載文本」 我試圖

#loading:after{ 
content: "loading text"; 
} 

但它會顯示在頁面的左上角的文字。

Answer 1

嘗試：

#loading:after{ 
    content: "Loading text"; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
} 

Answer 2

您可以嘗試使用上#loading:after絕對位置。然後，你可以相對於僞元素很容易定位到#loading父母的位置

Answer 3

建立position: relative;父之後再試試這個：

#loading:after { 
    content: "loading text"; 
    position: absolute; 
    bottom: 100%; 
} 

Answer 4

<div id="loading"> 
    <div class="loadingImage" > 
    <img src="https://d13yacurqjgara.cloudfront.net/users/82092/screenshots/1073359/spinner.gif" alt=""> 
    </div> 
</div> 


#loading { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background : #fff; 
} 

.loadingImage { 
    position:relative; 
    top : 50%; 
    left : 50%; 
    margin-left : -50px; 
    margin-top : -50px; 
} 

.loadingImage img { 
    width : 100px 
} 

.loadingImage:after{ 
content: "loading text"; 
    position:absolute; 
    top:-30px; 
    left : 0 
}