html - 在旋转元素中居中文本

Question

我有一个简单的加载器动画，我想在圆圈内添加一个加载文本。

当我在旋转.slide-loader并且我的文字在里面时，我试图排除它，.loader-text但它仍然在旋转？！如何修复圆圈内的加载器文本？

这是代码：

.slide-loader:not(.loader-text) { 
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; 
  animation: spin 2s linear infinite;


}


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

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

  <div class="slide-loader">
    <div class="loader-text">Loading...</div>
  </div>

标签： htmlcss

Answer 1

试试这个代码：

  .slide-loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;


  }


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

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

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

    100% {
      transform: rotate(360deg);
    }
  }

<div class="slide-loader">
    <div class="spinner"></div>
    <div class="loader-text">Loading...</div>
  </div>