html - 如何在旋转图像下方显示文字

Question

我想在加载图像下方显示一些文本。但是文本在不同的浏览器中对齐到不同的位置。附上chrome和IE浏览器的截图

下面是我用过的HTML

.LoaderwithText {
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  top: 50%;
  left: 50%;
  white-space: nowrap;
}

.loader {
  border: 12px solid #f3f3f3;
  /* Light grey */
  border-top: 12px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -ms-animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  opacity: 0.5;
  position: absolute;
}

#LoaderText {
  Color: black;
  font-size: 14px;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

<div class="LoaderwithText">
  <a class="loader"></a>
  <p id="LoaderText">Deleting...</p>
</div>

我在样式中缺少什么应该让它在所有浏览器中工作。

IE

Chrome

Answer 1

如果您使用的是 flex，则需要调整容器的大小以使其内容居中:

Absolute 元素也可以通过坐标和 margin 居中(如果它们具有静态大小)。

.LoaderwithText {
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  /* update*/
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

.loader {
  border: 12px solid #f3f3f3;
  /* Light grey */
  border-top: 12px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -ms-animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  opacity: 0.5;
  position: absolute;
  /* update*/
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

#LoaderText {
  Color: black;
  font-size: 14px;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

<div class="LoaderwithText">
  <a class="loader"></a>
  <p id="LoaderText">Deleting...</p>
</div>