html - 在加载微调器的右侧添加段落
问题描述
我对编程很陌生,如果您能为这个问题提供有用的指南,我将不胜感激:
我想将段落对齐到加载微调器的右侧,有人可以帮忙吗?
.loading {
display: flex;
justify-content: center;
}
.loading--full-height {
align-items: center;
height: 100%;
}
.loading::after {
content: "";
width: 5px;
height: 5px;
background: #000000;
opacity: 0.5;
border-radius: 50%;
animation: loading 0.3s ease-in-out infinite alternate;
}
@keyframes loading {
/* Safari support */
from {
opacity: 0;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1.75);
}
}
<div class="loading loading--full-height">
<P>Status: <strong>Awaiting for payment...</strong></P>
</div>
解决方案
您可以通过更改.loading::after
为.loading::before
. 这会将加载伪元素定位在段落之前。这是在上下文中:
.loading {
display: flex;
justify-content: center;
}
.loading--full-height {
align-items: center;
height: 100%;
}
.loading::before {
content: "";
width: 5px;
height: 5px;
background: #000000;
opacity: 0.5;
border-radius: 50%;
animation: loading 0.3s ease-in-out infinite alternate;
}
@keyframes loading {
/* Safari support */
from {
opacity: 0;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1.75);
}
}
<div class="loading loading--full-height">
<P>Status: <strong>Awaiting for payment...</strong></P>
</div>
推荐阅读
- r - Rdgal 不能很好地保存 shapefile
- io - 在 Fortran 中,如何在没有换行符的情况下将文本写入控制台?
- vb.net - 进度条未在单独的表单上更新
- javascript - 想知道特定脚本代码的含义是什么
- javascript - 表单提交后如何重新加载页面?
- javascript - 截断按句子分割的文本
- python - 从 Maya 发送并执行 maxscript 或 python 到 3ds Max
- mongodb - MongoDB如何通过搜索混合类型字段来查找文档?
- r - 如何在 tidymodels 中使用 fit() 模拟 last_fit()?
- node.js - 节点 Discord.js Axios API 索引