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

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

如何在后臺(tái)頁面中間添加引導(dǎo)旋轉(zhuǎn)圖標(biāo)？

如何在后臺(tái)頁面中間添加引導(dǎo)旋轉(zhuǎn)圖標(biāo)？

慕無忌1623718 2023-11-13 11:05:11
我有一個(gè) html 頁面，在每個(gè)頁面重新加載時(shí)我想顯示一個(gè)后臺(tái)加載器圖標(biāo)。我使用了引導(dǎo)微調(diào)圖標(biāo)，但無法將其添加到頁面中心。<html><style>  .overlay {    background-color:#EFEFEF;    position: fixed;    width: 100%;    height: 100%;    z-index: 1000;    top: 0px;    left: 0px;    opacity: .5;     filter: alpha(opacity=50);     display: none;  }</style><body><div class="overlay">  <div class="d-flex justify-content-center">      <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">      <span class="sr-only">Loading...</span>    </div>  </div></div><!-- here goes the main content --><!-- here goes the main content --></body></html>
查看完整描述

4 回答

?
翻過高山走不出你

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

您必須像這樣刪除display: none并調(diào)整頂部位置：


 .overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    z-index: 1000;

    top: 40%;

    left: 0px;

    opacity: 0.5;

    filter: alpha(opacity=50);

 }

<html>

  <head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

  </head>

  <body>

    <div class="overlay">

      <div class="d-flex justify-content-center">  

        <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">

          <span class="sr-only">Loading...</span>

        </div>

      </div>

    </div>

    <!-- here goes the main content -->

  </body>

</html>


查看完整回答
反對(duì) 回復(fù) 2023-11-13
?
www說

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

像這樣添加“align-items-center”類。


<div class="overlay d-flex justify-content-center align-items-center">

  <div class="">  

    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">

      <span class="sr-only">Loading...</span>

    </div>

  </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2023-11-13
?
偶然的你

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

這是一種直接的方法，對(duì)我來說是最好的方法:)


超文本標(biāo)記語言


<div class="myspinner">

  <div class="spinner-border" role="status">

  </div>

</div>


CSS


.myspinner {

 height: 100vh;

 display:flex;

 flex-direction: column;

 justify-content: center;

 align-items: center;

}

JS 小提琴演示：https://jsfiddle.net/36xrf9mp/5/


查看完整回答
反對(duì) 回復(fù) 2023-11-13
?
FFIVE

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

這是解決方案CSS


    .overlay {

        background-color: #EFEFEF;

        position: absolute;

        left: 50%;

        top: 50%;

        -webkit-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%);

        opacity: .5;

        filter: alpha(opacity=50);

    }


查看完整回答
反對(duì) 回復(fù) 2023-11-13
  • 4 回答
  • 0 關(guān)注
  • 204 瀏覽

添加回答

舉報(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)