Блог

Главная - Вопросы по программированию - Как централизованно выровнять мой текст под загрузчиком для всех размеров экрана?

Как централизованно выровнять мой текст под загрузчиком для всех размеров экрана?

#html #css

Вопрос:

 <style>
      #loader {
        position:absolute; 
        top: 50%;
        left: 50%;
        margin: -25px 0 0 -25px;
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #1976d2;
        width: 60px;
        height: 60px;
       -webkit-animation: spin 2s linear infinite; /* Safari */
      animation: spin 2s linear infinite;
      }
      
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      </style>
  </head>

  <body id="body">
    <div class="loadingcontainer">
    <div id="loader"></div>
    <div id="loadingMsg" style="font-family: sans-serif; font-size: 12px; font-weight: bold; color:black; top: 50%; left: 50%;   margin: -25px 0 0 -25px; position:absolute;">Making stuff up. Please wait... 🚀</div>
  </div>

ниже есть загрузчик и текст, пожалуйста, помогите расположить текст в центре ниже/под загрузчиком для всех размеров экрана. Как оформить/внести изменения в приведенный выше код?

Комментарии:

1. Что вы подразумеваете под «текстом с центральным расположением»? Скриншот/описание желаемого результата было бы полезно.

2. Регулировка поля #loadingMsg на-25 пикселей не приведет к его центрированию. Его нужно отрегулировать на половину ширины #loadingMsg, чтобы он был центрирован по горизонтали.

3. Для центрирования текста вы можете удалить css «слева» и добавить «ширина: 100%; выравнивание текста: по центру;»

4. в основном расположите его в центре под загрузчиком для любого размера экрана. Я попытался использовать верхний:60% и левый:45%. но это не сработает для меньшего размера экрана или приложений.

Ответ №1:

это то, что ты ищешь?

 <style>
      body,html{
        margin:0;
        padding:0;
      }
      .loadingcontainer{
        width: 100vw;
        height: 50vh;
        padding-top: 50vh;
        text-align: center;
      }
      #loader {
        position: relative;
        left: 50%;
        margin: -30px 0 0 -30px;
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #1976d2;
        width: 60px;
        height: 60px;
       -webkit-animation: spin 2s linear infinite; /* Safari */
      animation: spin 2s linear infinite;
      }
      #loadingMsg{
        margin-top: 5px;
      }
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      </style>
  </head>

  <body>
    <div class="loadingcontainer">
    <div id="loader"></div>
    <div id="loadingMsg">Making stuff up. Please wait... 🚀</div>
  </div>

Ответ №2:

Вы можете вставить позицию только для контейнера, как это :

 .loadingcontainer {

    position:absolute; 

    top: 50%;

    left: 50%;

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

}

для настройки текстового центра используйте :

 #loader {

    margin: auto;

    //Other codes...

}
 
 .loadingcontainer {
        position:absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      
      #loader {
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #1976d2;
        width: 60px;
        height: 60px;
       -webkit-animation: spin 2s linear infinite; /* Safari */
       animation: spin 2s linear infinite;
       margin: auto;
      }

      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      } 
  <div class="loadingcontainer">
        <div id="loader"></div>
        <div id="loadingMsg" style="font-family: sans-serif; font-size: 12px; font-weight: bold; color:black;">Making stuff up. Please wait... 🚀</div>
    </div>
Метки: