以下是我的HTML结构。请不要更改HTML结构。 请任何人帮我解决?
甚至尝试第一个外部div"位置相对"和innerDiv"定位绝对保证金自动"除了它仍然在浏览器的顶部之外的所有
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01"></div>
<div class="f_circleG" id="frotateG_02"></div>
<div class="f_circleG" id="frotateG_03"></div>
<div class="f_circleG" id="frotateG_04"></div>
<div class="f_circleG" id="frotateG_05"></div>
<div class="f_circleG" id="frotateG_06"></div>
<div class="f_circleG" id="frotateG_07"></div>
<div class="f_circleG" id="frotateG_08"></div>
</div>
</div>
</div>
</body>
以下是我的css文件
.outerDiv{
position:relative;
}
.innerDiv{
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#floatingCirclesG{
position:relative;
width:125px;
height:125px;
margin:auto;
transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:rgb(255,255,255);
height:22px;
width:22px;
border-radius:12px;
-o-border-radius:12px;
-ms-border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
animation-name:f_fadeG;
-o-animation-name:f_fadeG;
-ms-animation-name:f_fadeG;
-webkit-animation-name:f_fadeG;
-moz-animation-name:f_fadeG;
animation-duration:1.2s;
-o-animation-duration:1.2s;
-ms-animation-duration:1.2s;
-webkit-animation-duration:1.2s;
-moz-animation-duration:1.2s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
}
#frotateG_01{
left:0;
top:51px;
animation-delay:0.45s;
-o-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-moz-animation-delay:0.45s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
}
#frotateG_03{
left:51px;
top:0;
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#frotateG_05{
right:0;
top:51px;
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#frotateG_07{
left:51px;
bottom:0;
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
@keyframes f_fadeG{
0%{
background-color:#087890;
}
100%{
background-color:rgb(255,255,255);
}
}
@-o-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-ms-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
@-moz-keyframes f_fadeG{
0%{
background-color:rgb(0,0,0);
}
100%{
background-color:rgb(255,255,255);
}
}
答案 0 :(得分:0)
您可以将整个预加载器包装在div
中并将其置于中心位置,
<div style="height: 100%; width: 100%; left:0px; top:0px; right: 0px; bottom: 0px; margin:auto;">
并确保您的预加载器不会位于任何其他样式区域之间,例如<div>
或<span>
,这可能会改变高度和宽度属性。
希望这会有所帮助。 :)
答案 1 :(得分:0)
请尝试此代码可能会有所帮助
1-确保HTML AND BODY的宽度和高度为100%;
html,body {width:100%;height:100%;margin:0;padding:0;}
2-在outerDiv中添加宽度和高度100%
.outerDiv{
position:relative;
width:100%;
height:100%;
}
3-更改顶部:50%并添加margin-top:-62px;
.innerDiv{
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;margin-top:-62px;
}
答案 2 :(得分:0)
无需定义.innerDiv属性或top:50%
.htaccess
如果没有相对父节点,它将在父节点上搜索具有相对位置的容器,然后它将将body作为亲戚。
答案 3 :(得分:0)
只需像这样编辑“pace.css”中的“右侧”
.pace .pace-activity {
right: 500px;
}