[英]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.