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

Question

我想在加载图片下方显示一些文字。但是文字在不同的浏览器中与不同的位置对齐。我附上了chrome和IE浏览器的屏幕截图

以下是我使用过的HTML

＆＃13;

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我所缺少的风格应该能够在所有浏览器中使用。

IE

Chrome

Answer 1

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

Absolute元素也可以通过coordonates和margin居中，如果它们具有静态大小。

＆＃13;

＆＃13;

.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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;