时间戳

首页 > 解决方案 > 如何使此 HTML 按钮居中并确保其位置不变？

javascript - 如何使此 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>

标签： javascripthtmlcss

解决方案

一种方法是将内容包装在一个 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>

推荐阅读