我想做一個在“氣泡”文本下方水平對齊的按鈕。我已經嘗試過 flex 并且在片段中我嘗試使用 transform 但無論我嘗試什么我都不會得到想要的結果。所以請幫忙!
整個代碼
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
}
section container {
height: 200px;
position: relative;
border: 3px solid green;
}
section center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<section>
<div class="container">
<div class="container">
<button type="button" onclick="next()"> Next </button>
</div>
</div>
</section>
uj5u.com熱心網友回復:
既然你有容器類但實際上并沒有使用它,我們可以把它變成一個彈性列并將兩個元素都放在里面
function Seifenblasen_blasen() {
const section = document.querySelector('section')
const createElement = document.createElement('spawn')
var size = Math.random() * 60;
createElement.style.width = 30 size 'px';
createElement.style.height = 30 size 'px';
createElement.style.left = Math.random() * innerWidth "px";
section.appendChild(createElement);
setTimeout(() => {
createElement.remove()
}, 8000)
}
const Blaseninterval = setInterval(Seifenblasen_blasen, 100)
{
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
}
section spawn {
position: absolute;
bottom: -80px;
background: transparent;
border-radius: 50%;
pointer-events: none;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
animation: animate 4s linear infinite;
}
section spawn:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
transform: scale(0.25) translate(-70%, -70%);
background: radial-gradient(#fff, transparent);
opacity: 0.6;
border-radius: 50%;
}
@keyframes animate {
0% {
transform: translateY(0%);
opacity: 1;
}
99% {
opacity: 1;
}
100% {
transform: translateY(-2000%);
opacity: 0;
}
section span {
margin-top: 700px;
font-size: 1em;
color: #333;
margin: 0 auto;
font-family: consolas;
background-color: #1F69FA;
border: none;
position: absolute;
}
section container {
height: 200px;
position: relative;
border: 3px solid green;
}
section center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<section>
<div class="container">
<h2> Bubbles </h2>
<button type="button" onclick="next()"> Next </button>
</div>
</section>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/487468.html
標籤:javascript html css 按钮 结盟
上一篇:在JButton中添加裝飾