在旋转元素内使文本居中

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>

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>

Answer 2

你不能。因此，如果您轮换父项，则轮换子项。您需要同时以其他方式旋转文本。

然后以您希望的任何方式居中文本，也许使用 flexbox....

.slide-loader {
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;
display: flex;
justify-content: center;
align-items: center;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-text {
animation: spin 2s linear infinite reverse;
}

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

Answer 3

使用绝对定位的伪元素 (::before( 作为旋转区域，并使用弹性框使文本居中：

.slide-loader {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.slide-loader::before {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
animation: spin 2s linear infinite;
content: '';
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

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

Answer 4

微调器和文本可以是同级，您可以相对于父级居中：

.slide-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
.spinner {
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 6px solid #f3f3f3;
border-radius: 50%;
border-top: 6px solid #3498db;
box-sizing: border-box;
position: absolute;
/*Center spinner with these 4 lines*/
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.loader-text {
position: absolute;
/*Center text with these 3 lines*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@-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>

Answer 5

.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;
}
.container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

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

Answer 6

嗨，我解决了这个问题并且工作得很好。

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

.slide-loader{ 
grid-row: 1/-1;
grid-column: 1/-1;
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;
}
.container{
width: 200px;
display: grid;
grid-template-rows: 1fr 20px 1fr;
grid-template-columns: auto 60px auto;
}
.loader-text{
grid-row: 2;
grid-column: 2;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

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