如何在旋转图像下方显示文本

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

铬

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>