Question

我在互联网上的某个地方找到了一小段CSS，它重新创建了一个很酷的PayPal微调器，然后我做了一个小提琴：

它工作得很好，但我无法弄清楚如何将文本放在该微调器的中心，例如“正在加载......”。我已经修好并尝试过，但却找不到任何工作。

这是CSS：

.spinner.loading {
    display: none;
    padding: 50px;
    text-align: center;
}
.spinner.loading:before {
    content: "";
    height: 90px;
    width: 90px;
    margin: -15px auto auto -15px;
    position: absolute;
    top: 35%;
    left: 45%;
    border-width: 8px;
    border-style: solid;
    border-color: #2180c0 #ccc #ccc;
    border-radius: 100%;
    animation: rotation .7s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

HTML：

<div id="divSpinner" class="spinner loading"></div>

在开始和结束div元素之间放置文本不会做任何事情。有什么想法吗？

Answer 1

不再支持

<center>（html5中不推荐使用中心）所以请使用这样的类：

.centered {
  text-align: center;
}

然后使用calc来获取加载文本的正确位置：

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

＆＃13;

$("#btnLoadRecords").click(function() {
  $("#divSpinner").show();
  setTimeout(function() {
    $("#divSpinner").hide();
  }, 10000);
});

＆＃13;

.centered {
  text-align: center;
}

.spinner.loading {
  display: none;
  padding: 50px;
  text-align: center;
}

.loading-text {
  width: 90px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 45px);
  text-align: center;
}

.spinner.loading:before {
  content: "";
  height: 90px;
  width: 90px;
  margin: -15px auto auto -15px;
  position: absolute;
  top: calc(50% - 45px);
  left: calc(50% - 45px);
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="centered">
    <div id="divSpinner" class="spinner loading">
      <div class="loading-text">Loading ...</div>
    </div>

    <button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
  </div>
</body>

＆＃13;

Answer 2

对于HTML：

UITextFieldDelegate

对于CSS，除了你拥有的东西：

<div id="divSpinner" class="spinner loading" style="display: none;">
  <span>Loading…</span>
</div>

这将使它适用于您现有的代码，但您所拥有的是非常hacky。如果您希望文本在您的微调器内，则不应使用:: before元素。但鉴于你拥有的，这将有效。

Answer 3

这应该以内容为中心

<强> HTML

<div id="divSpinner" class="spinner loading">
   <p>hello</p>
</div>

<强> CSS

.spinner.loading {
  display: none;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 106px;
  height: 106px;
}

.spinner.loading:before {
  content: "";
  height: 90px;
  width: 90px;

  position: absolute;
  top: 0;
  left: 0;
  border-width: 8px;
  border-style: solid;
  border-color: #2180c0 #ccc #ccc;
  border-radius: 100%;
  animation: rotation .7s infinite linear;
}


@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

Answer 4

在你的css中添加：

.loading {
  position: relative;
  text-align: center;
  line-height: 140px;
  vertical-align: middle;
}

然后只需在span之间加载div中添加文本，例如：

<div id="divSpinner" class="spinner loading">
    <span class="text">Loading..</span>
</div>

因为加载有8px边框，所以为文本类添加：

.text {
  margin-left: 15px;
}

我认为这样的事情会让你前进。

如何在CSS微调器中居中文本？

4 个答案: