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?
#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;
}<div id="loader"></div>
<div id="Text">
<p>
<b>Loading</b>
</p>
</div>>Solution :
Just position absolute or wrap both in a container and flex that
#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;
}<div id="loader"></div>
<div id="Text">
<p>
<b>Loading</b>
</p>
</div>
</div>