html - 在加载微调器的右侧添加文本
问题描述
我做了一些研究并最终得到了这个,但文本位于加载微调器的底部,我想将文本对齐到加载微调器的右侧,就像这张图片中的一样,有人可以帮忙吗?提前致谢。
.preloader-wrapper {
background: rgba(22, 22, 22, 0.3);
width: 100%; height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.preloader-wrapper > .preloader {
background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
position: absolute;
min-width: 128px; /* image-width of loader */
min-height: 128px; /* image-height of loader */
box-sizing: border-box;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding-top: 148px; /* 128px image-height of loader + 20px margin */
text-align: center;
}
.preloader-wrapper::after{
content: "loading text";
}
<div class="preloader-wrapper">
<div class="preloader">
Loading...<br/>
And whatever you want to have here.
</div>
</div>
解决方案
您应该使用 flexbox 进行居中,而不是使用绝对位置和通过填充定位文本本身。
以下内容将简单地显示您的包装器中的任何内容(水平和垂直)。
.preloader-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
也就是说,您仍然需要将文本移动到专用容器中,以便您的标记看起来像这样。
<div class="preloader-wrapper">
<div class="preloader">
</div>
<div class="preloader-text">
Loading...<br/> And whatever you want to have here.
</div>
</div>
推荐阅读
- selenium - 如何在 Jupyter Notebook 中同步运行多个功能?
- ruby-on-rails - 活动记录 (Rails) 条件验证
- php - 在 Heroku 上部署 Symfony 5
- java - Springboot 独立 JAR 应用的 JNDI 配置
- python - 如何使用 pymongo 在 mongodb 中自动删除集合?(Django 不会删除 mongodb 集合)
- android - 检索用户朋友的 ID 并在 Recycler 中显示每个朋友的数据(Firebase)
- apache-kafka - 使用骆驼kafka连接器从远程文件中读取文件记录
- node.js - sh:1:del:未找到
- c# - 在 Azure 开发测试实验室中配置虚拟网络 - 以编程方式 (c#)
- c# - 单个查询中的 2 个参数化 where 子句(不是 'where _ 和 _')