Блог

Изображение

HTML-код здесь.

Вопрос 1:

Это правильный способ добавления классов начальной загрузки?

CSS:

 .hai {
   padding-top: 20%;
   padding-bottom: 20%;
   padding-left: 10%;
   padding-right: 10%;
}
  

Вопрос 2:

Я не знаком с css. Приведенный выше css дает идеальный результат на (моем) дисплее ПК (ссылка на скриншоты выше), но в мобильном представлении результат не такой, как я ожидал. Почему в мобильном представлении он не выровнен по центру по вертикали? Какие изменения следует внести?

поскольку у вас есть заполнение сверху снизу = 40%

я предполагаю, что вы должны установить высоту container .hai на 100-40 = 60%

отредактировано:

попробуйте добавить inside .hai { … }

высота: 60%;

Вы можете центрировать контейнер по вертикали, используя либо относительное / абсолютное позиционирование, либо выравнивание по вертикали.

Относительное / абсолютное позиционирование

 #container{
    position: relative;
    top: 50%;
    height: 500px;
    margin-top: -250px; /* Half the height */
}
  

Выравнивание по вертикали

 #container_parent{
    display: table;
}
#container{
    display: table-cell;
    vertical-align: middle;
}