Question

我想在中心创建一个带有加载程序图像和文本的简单全屏叠加层。我的文字有些问题。我希望图片 ABOVE 文本。你能帮我解决这个问题吗？

LeaveType

.loader - overlay {
  -ms - opacity: 0.9;
  background: #444;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0.9;
  position: fixed;
  top: 0;
  vertical-align: middle;
  width: 100%;
  z-index: 100000;
}

.loader-content {
  height: auto;
  margin-left: auto;
  margin-top: auto;
  width: auto;
}

.loader-center {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

.loader-text {
  color: # FFF;
  font - size: 18px;
}

http://jsfiddle.net/bLz7wgvs/2/

应该看起来像：

<div id="loadingOverlay" class="loader-overlay">
  <div class="loader-content loader-center">
    <img src="http://www.mysarkarinaukri.com/images/loadingBar.gif" class="loader-center" alt="" />
    <div class="loader-center loader-text">Loading, please wait...</div>
  </div>
</div>

Answer 1

将position: relative;添加到.loader-text

Answer 2

如果删除当前的.loader-content类并将其替换为.loader-center中的内容，然后简单地将.loader文本的文本居中，那么您将实现您想要的目标：

http://jsfiddle.net/bLz7wgvs/10/

.loader-content {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loader-text {
    color: #FFF;
    font-size: 18px;
    text-align: center;
}

您正在使用的加载程序图像中有相当多的透明空间，因此文本最终会比您想要的要低一些。要解决此问题，您必须从除文本之外的所有内容中删除.loader-center类，然后将以下css属性添加到其中：

.loader-center {
    position: absolute;
    top: 140px;
    width: 100%;
}

这里有一个看起来很像的小提琴： http://jsfiddle.net/bLz7wgvs/11/

我们在这里做的是首先将容纳图像和文本的容器居中，然后我们将文本绝对相对于其父定位，以便将文本移近装载机..

Answer 3

添加：

.loader-text {
   margin-top: 30px;
   width: 165px;
}

具有居中元素

3 个答案: