英文:
Add text in the middle of another div container
问题
我有两个div容器。一个是文本，另一个是加载器。
现在两个div容器垂直排列在一起。但我想把文本放在中间，覆盖在“loader”容器上方。这样“loading”文本就会出现在预加载器的中间。
我应该怎么做？
<!-- 开始片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-css -->
#loader {
margin: auto;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #003750;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#Text {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
<!-- 语言: lang-html -->
<div id="loader"></div>
<div id="Text">
<p>
<b>加载中</b>
</p>
</div>
<!-- 结束片段 -->
[1]: https://i.stack.imgur.com/fH6AY.png
英文:
I have two div containers. One is for Text and another is for loader.
Right now both div containers are placed vertically one after another. But I would like to place the text in the center, that is overlying on top of "loader" container. So that the "loading" text comes in the middle of my preloader.
How do I do this?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#loader {
margin: auto;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #003750;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#Text {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
<!-- language: lang-html -->
<div id="loader"></div>
<div id="Text">
<p>
<b>Loading</b>
</p>
</div>
<!-- end snippet -->
答案1
得分: 1
只需使用绝对定位或将两者包裹在一个容器内并使用flex。
英文:
Just position absolute or wrap both in a container and flex that
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#loader {
margin: auto;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #003750;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#Text {
position: absolute;
top:40px;
margin-left: 280px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
}
<!-- language: lang-html -->
<div id="loader"></div>
<div id="Text">
<p>
<b>Loading</b>
</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论