Как мне отцентрировать эту кнопку HTML и убедиться, что ее положение не меняется? - PullRequest
Новая
       8

Как мне отцентрировать эту кнопку HTML и убедиться, что ее положение не меняется?

0 голосов
/ 03 августа 2020

Я сделал кнопку, которая генерирует случайный факт Чака Норриса с помощью API Чака Норриса.

Я попытался центрировать саму кнопку и элемент h3, где создается факт. Однако, поскольку каждый раз при нажатии кнопки создаются разные факты (некоторые факты короткие, а некоторые очень длинные), кнопка «Создать» смещается вверх и вниз.

Я хочу, чтобы эта кнопка оставалась stati c с каждым фактом, генерируемым под ним. 

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 ]

1 голос
/ 03 августа 2020

Один из способов сделать это - обернуть содержимое в div и присвоить ему высоту. фиксированная высота останавливает движение, так как он не центрирует 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>
0 голосов
/ 03 августа 2020

Вы можете использовать для этого сетку со свойством place-items, установленным в center. 

.container{
    display: grid;
    place-items: center;
    
    height: 100vh;
    width: 100vw;
}
0 голосов
/ 03 августа 2020

это один из способов добиться этого: 

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>
0 голосов
/ 03 августа 2020

Полагаю, что удаление justify-content: center может помочь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...