更改窗口大小时文本对齐方式更改

大佬教程收集整理的这篇文章主要介绍了更改窗口大小时文本对齐方式更改，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决更改窗口大小时文本对齐方式更改？

我试图在调整大小时将百分比文本和加载文本保持在加载器的中间。当我调整窗口大小时，宽度更改有效，但是当我更改高度时，它会移动文本。我不确定为什么会发生这种情况，但如果有人能够帮助我了解为什么会发生这种情况，那就太好了。

CSS：

<style type="text/CSS">
    HTML {
        height: 100%;
        wIDth: 100%;
    }
    body {
        background: url("https://cdn.cporigins.com/site/images/bg.jpg");
        margin: 0;
    }
    .container {
    display: none;
        position: relative;
        Font-family: 'Do Hyeon',sans-serif;
        Font-size: 27px;
    }
    .mIDdle {
        position: absolute;
        top: 50%;
        left: 50%;
        bottom: 50px;
        transform: translate(-50%,-50%);
        text-align: center;
    }

    hr {
        margin: auto;
        wIDth: 40%;
        border: 0;
        height: 1px;
        background: #333;
        background-image: linear-gradIEnt(to right,#ccc,#333,#ccc);
    }
    a {
        text-decoration: none;
    }
    a:hover {
        color: #add8e6;
    }
    i#heart-icon {
        height: 18px;
        wIDth: 18px;
        background-image: url(https://cdn.cporigins.com/site/images/heart_icon.png);
        background-repeat: no-repeat;
    }
    i#heart-icon:before {
        content: "";
        padding-right: 18px;
    }
    .loader {
        Font-size: 10px;
        margin: 50px auto;
        border: 16px solID #f3f3f3;
        border-top: 16px solID #6294f9;
        border-radius: 50%;
        wIDth: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
        background-repeat: no-repeat;
        position: relative;
        bottom: -32%;
    }
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    #loadingdiv {
        position: relative;
        top: -50px;
        left: 0;
        wIDth: 100%;
        height: 100%;
        background: #8360c3;
        background: -webkit-linear-gradIEnt(to top,#2ebf91,#8360c3);
        background: linear-gradIEnt(to top,#8360c3);
    }
    #loaderTxt {
        position: relative;
        color: white;
        Font-size: 32px;
        Font-family: 'Do Hyeon',sans-serif;
        top: 297px;
        Font-weight: bold;
        text-align: center;
    }
    #loaderPercent {
        position: relative;
        color: white;
        Font-size: 32px;
        Font-family: 'Do Hyeon',sans-serif;
        top: 128px;
Font-weight: bold;
        text-align: center;
    }
    </style>

我基本上将 div 附加到 Js 中的 HTML 标签。

$('HTML').append('<div ID="loadingdiv"><div class="loader"></div><div ID="loaderTxt">Initializing Origins</div><div ID="loaderPercent">0%</div></div>');

解决方法

html {
  height: 100%;
  width: 100%;
}

body {
  background: url("https://cdn.cporigins.com/site/images/bg.jpg");
  margin: 0;
}

#loadingDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8360c3;
  background: -webkit-linear-gradient(to top,#2ebf91,#8360c3);
  background: linear-gradient(to top,#8360c3);
}

.loader {
  font-size: 10px;
  margin: 50px auto;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #6294f9;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  background-repeat: no-repeat;
  position: relative;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loaderTxt {
  position: absolute;
  color: white;
  font-size: 32px;
  font-family: 'Do Hyeon',sans-serif;
  bottom: 10vh;
  font-weight: bold;
  text-align: center;
}

#loaderPercent {
  position: absolute;
  color: white;
  font-size: 32px;
  font-family: 'Do Hyeon',sans-serif;
  font-weight: bold;
  text-align: center;
}

<div id="loadingDiv">
  <div class="loader"></div>
  <div id="loaderTxt">Initializing Origins</div>
  <div id="loaderPercent">0%</div>
</div>

大佬总结

以上是大佬教程为你收集整理的更改窗口大小时文本对齐方式更改全部内容，希望文章能够帮你解决更改窗口大小时文本对齐方式更改所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。