gpt4 book ai didi

html - 文本和加载器不在中间

转载 作者:太空宇宙 更新时间:2023-11-04 07:38:21 25 4
gpt4 key购买 nike

我的文本和“加载器”有问题。我希望它们位于中间,但它们在顶部居中。

.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

.WebEntTxt {
color: white;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>

如何让它们位于屏幕的中心,而不是顶部?

最佳答案

由于您希望文本和微调器都位于中间,因此请在它们周围添加一个包装器。然后,

只需将 position fixed 添加到 wrapper 中,如果您希望它位于整个窗口的中心。然后通过添加 left 50%top 50% 将其置于中心。然后,您必须使用 translate transform 偏移其原始 width 和 height 的一半。

#wrapper {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loader {
margin: auto;
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
/* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

.WebEntTxt {
color: red;
line-height: 1.5;
text-align: center;
text-decoration: none;
}
<body class="Background" background="Background.jpg">
<div id="wrapper">
<div class="loader"></div>
<h1 class="WebEntTxt">You are entering PUBGpot! Please wait!</h1>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

关于html - 文本和加载器不在中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48744350/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com