<script>
(function($) {
$(document).on('facetwp-refresh', function() {
$('.facetwp-template').prepend('<div >Loading...</div>');
});
$(document).on('facetwp-loaded', function() {
$('.facetwp-template .is-loading').remove();
});
})(jQuery);
</script>
<style>
.is-loading{
position: relative;
width: 100%;
height:100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
</style>
我在嘗試將我的.is-loadingdiv居中時遇到了很多麻煩.facetwp-template我希望它始終位于內容的中心.facetwp-template
如果有人可以模擬這種情況
.facetwp-template，可以是任何 div 并在其中插入一個加載 div 并向我展示我錯過和不理解的內容。
甚至可以添加一個疊加效果來查看“白色”加載文本，如果你足夠瘋狂，也許還可以插入一個有點異國情調的加載影片，比如旋轉圖示？
我得到了什么
我想要的是
uj5u.com熱心網友回復：
使位置絕對，然后調整螢屏上的 div 位置。就像是：
<style>
.is-loading{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:100%;
align-content:center;
align-items:center;
justify-content:center;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
</style>
uj5u.com熱心網友回復：
你需要給display: flex;或display: inline-flex;給你的.is-loading班級。只有這樣，您才能將其他與 flex 相關的屬性應用于您的類。檢查這個小提琴：https ://jsfiddle.net/enginustun/p32zbkwn/2/
您可以嘗試以下樣式；
.is-loading {
display: flex;
position: relative;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
color: white;
}
uj5u.com熱心網友回復：
使其絕對并給出頂部，左 50% 以將其置于螢屏中央。然后翻譯-50%。
.is-loading{
position: absoulte;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height:100%;
text-align:center;
font-size:18px;
font-weight:400;
color: white;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454836.html
標籤：javascript css