我如何使这个 HTML 按钮居中并确保它的位置不会改变？
我制作了一个按钮，使用 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>
四季花海浏览 186回答 4
4回答
-
胡说叔叔
一种方法是将内容包裹在一个 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> -
繁花不似锦
我想，删除 justify-content: center 会有所帮助 -
慕丝7291255
这是您可以实现此目标的方法之一：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
您可以为此使用网格，并将 place-items 属性设置为居中。.container{ display: grid; place-items: center; height: 100vh; width: 100vw;}
随时随地看视频慕课网APP
相关分类
JavaScript