Выравнивание текста изменяется при изменении размера окна

ProgramBox

Выравнивание текста изменяется при изменении размера окна

Post author:admin
Запись опубликована:18 декабря, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать так, чтобы процентный текст и загружаемый текст оставались в середине загрузчика при изменении размера. Изменение ширины работает при изменении размера окна, но при изменении высоты текст перемещается. Я не уверен, почему это происходит, но если кто-то сможет помочь мне понять, почему это происходит, это было бы неплохо.

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, #2ebf91, #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>

У меня в основном есть это, где он добавляет divs к тегу html в js.

 $('html').append('<div id="loadingDiv"><div class="loader"></div><div id="loaderTxt">Initializing Origins</div><div id="loaderPercent">0%</div></div>');

Ответ №1:

В этом типе дизайна вы должны поместить контейнер для сгибания и центрирования всех элементов (также сделайте его относительным)… Теперь сделайте все элементы внутри него абсолютно расположенными… Здесь все элементы будут помещены в центр (этого контейнера)… Виола, у вас никогда больше не возникнет проблемы с размещением элементов на основе размера px..

 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, #2ebf91, #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>

Развернуть фрагмент

1. Вы знаете, что я пытался сделать контейнер для отображения гибким, и это действительно не имело никакого значения. Я попробую другие вещи, которые вы добавили к нему.

2. потрясающе, что сработало, спасибо. Мне просто нужно исправить загружаемый текст, но это легко

Ответ №2:

Попробуйте закончить строку выравнивания css на !важно

итак, если вы хотите выровнять этот HTML-текст

<p>THIS IS MY TEXT</p>

Вы можете использовать css следующим образом

p{text-align:center !important;}

Я надеюсь, что этот ответ поможет.