Два встроенных делителя (ПК) с выравниванием по вертикали по центру на носителе

Question

Я пытаюсь создать верхнюю панель для страницы (2 встроенных деления), и у меня возникают проблемы с их вертикальным центрированием на экранах мультимедиа.

(Paint) пример того, что я пытаюсь сделать

Я использую float: left;, чтобы сделать div s встроенным + display: inline-block для li элементов, и он прекрасно работает, но сохраняет их встроенными на экранах мультимедиа.

Буду признателен за любую помощь!

Answer 1

Вертикальное центрирование в CSS чрезвычайно сложно - я бы порекомендовал использовать Flexbox для решения таких задач - https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Answer 2

Может ли это быть разрешено с помощью медиазапросов (они позволяют изменять состояние css элемента в зависимости от размера экрана):

@media only screen and (max-width: 1280px) {
.your-class-here {
display: block;
}
}

не забудьте также добавить соответствующий метатег в элемент HTML-заголовка:

<meta name="viewport" content="width=device-width, initial-scale=1">

Приветствия

Marky