Как вертикально отцентрировать заголовок моего сайта?

Question

Я пытаюсь расположить по центру заголовок и брендинг моего сайта в режиме планшета и смартфона: https://odetomytravels.com/

Я хотел бы просто добавить код CSS в раздел тем сайта "aditionnal CSS".

Спасибо!

site-title site-branding {
vertical-align: middle !important;
}

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

Answer 1

3 вещи:

1. Вы не правильно закрыли медиазапрос.
2. Вы неправильно запросили класс.

3. См. Пересмотренные свойства класса div. Я выделил его красным.

           @media only screen and (max-width: 1024px)
           {
   
           .mobile-header .mobile-site-header {
               background-image: url(https://odetomytravels.com/wp-content/uploads/2019/10/Header-2_1.gif);
               background-size: cover !important;
               background-position: center;
           } 
   
           .site-branding {
               border:5px solid red;
               position: fixed;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               }
           }
   

Answer 2

Сначала необходимо установить свойство display этого элемента или убедиться, что для него установлено то, что вы можете использовать.

Ваше правило вертикальное выравнивание требует встроенного или табличного блока.

Тогда поймите, что центрирование по вертикали требует определения высоты элемента. Если вы можете установить высоту элемента, то это довольно просто. Это будет пытаться выровнять что-нибудь внутри него.

site-title site-branding {
    display:inline;
    height:400px;
    vertical-align: middle;
}