在加载微调器的右侧添加文本答案

【问题标题】：Add text to the right of the loading spinner在加载微调器的右侧添加文本
【发布时间】：2019-06-26 15:26:10
【问题描述】：

我做了一些研究，最终得到了this，但文本位于加载微调器的底部，我想将文本对齐到加载微调器的右侧，就像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>

【问题讨论】：

制作预加载器显示 flex .preloader{display:flex}
@Harshkurra 试过了，好像没用：（
我正在修改你的代码

标签： html css spinner

【解决方案1】：

您应该使用 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>

Demo

【讨论】：

【解决方案2】：

我已经根据你的代码创建了一个新的小提琴，我已经让父项成为一个弹性项目，它将在水平方向上有 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>

【讨论】：

抱歉回复晚了，感谢您的帮助，教程很棒：D。