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

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中不推荐使用center），因此请使用以下类：

.centered {
  text-align: center;
}

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

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

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

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

 <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>

Answer 2

对于HTML：

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

对于CSS，除了您拥有的之外：

.spinner.loading::before{
  // Remove position, top, and left properties
  margin: -15px auto -65px auto;
  display: block (or flex);
}

这将使其与您现有的代码一起使用，但是您所拥有的是很棘手的。 如果要将文本放在微调框内，则不应使用:: 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;
}

然后只需在跨度加载div中添加文本即可，例如：

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

并且由于加载具有8px边框，请在文本类中添加以下内容：

.text {
  margin-left: 15px;
}

我认为类似的东西应该可以帮助您前进。

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

问题描述

4 个解决方案

解决方案1
4 已采纳 2017-05-19 23:59:18

解决方案2
0 2017-05-19 23:56:26

解决方案3
0 2017-05-19 23:58:11

解决方案4
0 2017-05-20 02:10:41

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

问题描述

4 个解决方案

解决方案1 4 已采纳 2017-05-19 23:59:18

解决方案2 0 2017-05-19 23:56:26

解决方案3 0 2017-05-19 23:58:11

解决方案4 0 2017-05-20 02:10:41

解决方案1
4 已采纳 2017-05-19 23:59:18

解决方案2
0 2017-05-19 23:56:26

解决方案3
0 2017-05-19 23:58:11

解决方案4
0 2017-05-20 02:10:41