第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

我如何使這個(gè) HTML 按鈕居中并確保它的位置不會(huì)改變？

我如何使這個(gè) HTML 按鈕居中并確保它的位置不會(huì)改變？

四季花海 2022-12-18 16:38:50
我制作了一個(gè)按鈕，使用 Chuck Norris API 生成隨機(jī)的 Chuck Norris 事實(shí)。我試圖將按鈕本身和生成事實(shí)的 h3 元素居中。然而，由于每次單擊按鈕時(shí)都會(huì)生成不同的事實(shí)（有些事實(shí)很短，有些很長），“生成”按鈕會(huì)上下移動(dòng)。我想確保這個(gè)按鈕保持靜態(tài)，每個(gè)事實(shí)都在它下面生成。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貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

一種方法是將內(nèi)容包裹在一個(gè) div 中，并給它一個(gè)高度。固定高度停止移動(dòng)，因?yàn)樗鼪]有使自動(dòng)高度 div 居中。


這種方法帶有警告，如果事實(shí)大于包裝器，它將溢出到 div 下方。因此，根據(jù)頁面中發(fā)生的其他情況，您可能需要填充或注意這一點(diǎn)。


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>


查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
繁花不似錦

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊

我想，刪除 justify-content: center 會(huì)有所幫助



查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
慕絲7291255

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是您可以實(shí)現(xiàn)此目標(biāo)的方法之一：


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>


查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
慕神8447489

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超1個(gè)贊

您可以為此使用網(wǎng)格，并將 place-items 屬性設(shè)置為居中。


.container{

    display: grid;

    place-items: center;

    

    height: 100vh;

    width: 100vw;

}


查看完整回答
反對(duì) 回復(fù) 2022-12-18
  • 4 回答
  • 0 關(guān)注
  • 227 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)