尝试在 bootstrap 4 卡体中垂直和水平对齐微调器。
我已经尝试过 my-auto 和 justify-content-center & align-items-center,但我遗漏了一些东西。
我已经按显示类型进行了检查,我相信我的绝对显示是正确的
我也检查了我的位置,我相信我正确地使用了 flex。
我的目标是将微调器垂直和水平地加载到任何卡片的主体上。
我在看什么?
代码笔:https://codepen.io/sterling415/pen/xBErWV
HTML:
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body justify-content-center align-items-center">
<div id="overlay" onclick="off()">
<div id="justify-content-center align-items-center">
<div class="spinner"></div>
</div>
</div>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<button type="button" class="btn btn-primary" onclick="on()">Turn on overlay effect</button>
</div>
</div>
</div>
</div>
CSS:
.spinner {
height: 60px;
width: 60px;
margin: auto;
display: flex;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(0, 174, 239, .15);
border-right: 6px solid rgba(0, 174, 239, .15);
border-bottom: 6px solid rgba(0, 174, 239, .15);
border-top: 6px solid rgba(0, 174, 239, .8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#overlay {
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
JS:
function on() {
document.getElementById("overlay").style.display = "flex";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
最佳答案
更改 <div id="justify-content-center align-items-center">
到
<div class="w-100 d-flex justify-content-center align-items-center">
请看下面的操作:
function on() {
document.getElementById("overlay").style.display = "flex";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.spinner {
height: 60px;
width: 60px;
margin: auto;
display: flex;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left: 6px solid rgba(0, 174, 239, .15);
border-right: 6px solid rgba(0, 174, 239, .15);
border-bottom: 6px solid rgba(0, 174, 239, .15);
border-top: 6px solid rgba(0, 174, 239, .8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#overlay {
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body justify-content-center align-items-center">
<div id="overlay" onclick="off()">
<div class="w-100 d-flex justify-content-center align-items-center">
<div class="spinner"></div>
</div>
</div>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<button type="button" class="btn btn-primary" onclick="on()">Turn on overlay effect</button>
</div>
</div>
</div>
</div>
关于javascript - 仅微调器覆盖 Bootstrap 4 卡体 - Flex 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54993078/