我在互联网上的某个地方找到了一段 CSS，它重新创建了很酷的 PayPal 微调器，我用它做了一个 fiddle :
https://jsfiddle.net/55s5oxkf/5/
效果很好，但我不知道如何将文本放在微调器的正中央，例如“正在加载...”。我进行了修补和尝试，但无法使任何工作正常进行。
这是 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 元素之间放置文本没有任何作用。有什么想法吗？
最佳答案
<center>不再支持(中心在 html5 中弃用)所以使用这样的类:
.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>关于javascript - 如何使 CSS 微调器中的文本居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44080331/