我制作了一个按钮，使用 Chuck Norris API 生成随机的 Chuck Norris 事实。我试图将按钮本身和生成事实的 h3 元素居中。然而，由于每次单击按钮时都会生成不同的事实（有些事实很短，有些很长），“生成”按钮会上下移动。我想确保这个按钮保持静态，每个事实都在它下面生成。async function generate() { const getdata = await fetch('https://api.chucknorris.io/jokes/random'); const response = await getdata.json(); document.querySelector("h3").innerText = response.value;}.container { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100%;}<div class="container"> <button type="button" class="btn btn-warning button" onclick="generate()">GENERATE</button> <h3 class="info"></h3></div>
4 回答
胡说叔叔
TA贡献1804条经验 获得超8个赞
一种方法是将内容包裹在一个 div 中，并给它一个高度。固定高度停止移动，因为它没有使自动高度 div 居中。
这种方法带有警告，如果事实大于包装器，它将溢出到 div 下方。因此，根据页面中发生的其他情况，您可能需要填充或注意这一点。
async function generate (){
const getdata = await fetch('https://api.chucknorris.io/jokes/random');
const response = await getdata.json();
document.querySelector("h3").innerText = response.value;
}
.container{
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width:100%;
}
.wrapper {
height:100px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Chuck Norris Random</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<button type="button" class="btn btn-warning button" onclick="generate()">GENERATE</button>
<h3 class="info"></h3>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
慕丝7291255
TA贡献1859条经验 获得超6个赞
这是您可以实现此目标的方法之一：
async function generate (){
const getdata = await fetch('https://api.chucknorris.io/jokes/random');
const response = await getdata.json();
document.querySelector("h3").innerText = response.value;
}
.container{
position: relative;
height: 100vh;
}
.container > button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container > h3 {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
<div class="container">
<button type="button" class="btn btn-warning button" onclick="generate()">GENERATE</button>
<h3 class="info"></h3>
</div>
慕神8447489
TA贡献1780条经验 获得超1个赞
您可以为此使用网格，并将 place-items 属性设置为居中。
.container{
display: grid;
place-items: center;
height: 100vh;
width: 100vw;
}
添加回答
举报
0/150
提交
取消