[英]Horizontally align div
我在外部div(“加载”的id)中水平对齐旋转圆圈动画(包含在div的id为“ spin-panel”的div)中时遇到了麻烦,如下所示: https : //codepen.io/depaolif/笔/ MoYwrP
有谁知道为什么margin: auto
在这种情况下不会像通常那样起作用?
HTML:
<div id="loading">
Loading account info
<div id="spin-panel">
<span id="loading8-1">
<span id="CircleBottom"><span class="ball"></span></span>
</span>
<span id="loading8-2">
<span id="CircleMiddle"><span class="ball"></span></span>
</span>
<span id="loading8-3">
<span id="CircleTop"><span class="ball"></span></span>
</span>
</div>
</div>
SCSS:
@keyframes cwSpin {
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
#loading {
text-align: center;
margin-top: 40vh;
font-size: 40px;
width: 100vw;
#spin-panel {
width: 50%; // this doesn't make a difference
margin: 0 auto;
#loading8-1, #loading8-2, #loading8-3 {
display:block;
position:absolute;
margin:30px 0 0 100px;
width:80px;
height:80px;
animation: cwSpin 1s linear 0s infinite;
#CircleBottom, #CircleMiddle, #CircleTop {
display:block;
position:absolute;
width:100px;
height:100px;
border-radius:100px;
.ball {
width:20px;
height:20px;
display:block;
position:absolute;
background-color:#06C;
border-radius:20px;
margin:0 0 0 45px;
}
}
#CircleBottom {
transform:rotate(0deg);
}
#CircleMiddle {
transform:rotate(50deg);
}
#CircleTop {
transform:rotate(100deg);
}
}
}
}
#spin-panel
居中,但子代的位置绝对正确,边距偏移了他们的位置。
添加position: relative
对于#spin-panel
以及旋转的子级,添加top: 0; left: 50%; transform: translateX(-50%);
top: 0; left: 50%; transform: translateX(-50%);
并删除左边缘以将其水平居中。
@keyframes cwSpin { 0% { transform: translateX(-50%) rotate(0deg); } 100% { transform: translateX(-50%) rotate(360deg); } } #loading { text-align: center; margin-top: 40vh; font-size: 40px; width: 100vw; } #loading #spin-panel { width: 50%; margin: 1em auto 0; position: relative; } #loading #spin-panel #loading8-1, #loading #spin-panel #loading8-2, #loading #spin-panel #loading8-3 { display: block; position: absolute; margin: 0 0 0 0; width: 80px; height: 80px; top: 0; left: 50%; transform: translateX(-50%); } #loading #spin-panel #loading8-1 #CircleBottom, #loading #spin-panel #loading8-1 #CircleMiddle, #loading #spin-panel #loading8-1 #CircleTop, #loading #spin-panel #loading8-2 #CircleBottom, #loading #spin-panel #loading8-2 #CircleMiddle, #loading #spin-panel #loading8-2 #CircleTop, #loading #spin-panel #loading8-3 #CircleBottom, #loading #spin-panel #loading8-3 #CircleMiddle, #loading #spin-panel #loading8-3 #CircleTop { display: block; position: absolute; width: 100px; height: 100px; border-radius: 100px; } #loading #spin-panel #loading8-1 #CircleBottom .ball, #loading #spin-panel #loading8-1 #CircleMiddle .ball, #loading #spin-panel #loading8-1 #CircleTop .ball, #loading #spin-panel #loading8-2 #CircleBottom .ball, #loading #spin-panel #loading8-2 #CircleMiddle .ball, #loading #spin-panel #loading8-2 #CircleTop .ball, #loading #spin-panel #loading8-3 #CircleBottom .ball, #loading #spin-panel #loading8-3 #CircleMiddle .ball, #loading #spin-panel #loading8-3 #CircleTop .ball { width: 20px; height: 20px; display: block; position: absolute; background-color: #06C; border-radius: 20px; margin: 0 0 0 45px; } #loading #spin-panel #loading8-1 #CircleBottom, #loading #spin-panel #loading8-2 #CircleBottom, #loading #spin-panel #loading8-3 #CircleBottom { transform: rotate(0deg); } #loading #spin-panel #loading8-1 #CircleMiddle, #loading #spin-panel #loading8-2 #CircleMiddle, #loading #spin-panel #loading8-3 #CircleMiddle { transform: rotate(50deg); } #loading #spin-panel #loading8-1 #CircleTop, #loading #spin-panel #loading8-2 #CircleTop, #loading #spin-panel #loading8-3 #CircleTop { transform: rotate(100deg); } #loading #spin-panel #loading8-1, #loading #spin-panel #loading8-2, #loading #spin-panel #loading8-3 { animation: cwSpin 1s linear 0s infinite; }
<div id="loading"> Loading account info <div id="spin-panel"> <span id="loading8-1"> <span id="CircleBottom"><span class="ball"></span></span> </span> <span id="loading8-2"> <span id="CircleMiddle"><span class="ball"></span></span> </span> <span id="loading8-3"> <span id="CircleTop"><span class="ball"></span></span> </span> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.