在加载微调器的右侧添加文本
Add text to the right of the loading spinner
我做了一些研究,结果是 this but the text is at the bottom of the loading spinner, I want to align the text to the right of the loading spinner like the one in this image,有人可以帮忙吗?提前致谢。
.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>
我根据你的代码创建了一个新的fiddle,我将父项目设为一个弹性项目,它将在水平方向上有 2 个子项目,水平方向和垂直方向都在中心对齐,请阅读Flexbox 的概念以便更好地理解它
.preloader-wrapper {
display: flex;
justify-content: center;
background: rgba(22, 22, 22, 0.3);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
align-items: center;
}
.preloader-wrapper>.preloader {
background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
min-width: 128px;
min-height: 128px;
}
<div class="preloader-wrapper">
<div class="preloader">
</div>
<div class="text">
Loading...<br/> And whatever you want to have here.
</div>
</div>
我做了一些研究,结果是 this but the text is at the bottom of the loading spinner, I want to align the text to the right of the loading spinner like the one in this image,有人可以帮忙吗?提前致谢。
.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>
我根据你的代码创建了一个新的fiddle,我将父项目设为一个弹性项目,它将在水平方向上有 2 个子项目,水平方向和垂直方向都在中心对齐,请阅读Flexbox 的概念以便更好地理解它
.preloader-wrapper {
display: flex;
justify-content: center;
background: rgba(22, 22, 22, 0.3);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
align-items: center;
}
.preloader-wrapper>.preloader {
background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top;
min-width: 128px;
min-height: 128px;
}
<div class="preloader-wrapper">
<div class="preloader">
</div>
<div class="text">
Loading...<br/> And whatever you want to have here.
</div>
</div>