Как использовать линейную высоту, не зная высоты?

Question

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

Некоторые примеры кода:

<nav> 
    <section class="logo"> 
    <span>logo text</span> 
    </section> 
    <section> 
    <ul> 
     <li>link</li> 
     <li>link</li> 
     <li>link</li> 
     <li>link</li> 
    </ul> 
    </section> 
    <section class="dropdown"> 
    <span>dropdown</span> 
    </section> 
</nav> 

.logo { 
    display: inline-block; 
} 

.dropdown { 
    display: inline-block 
} 

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

Пробел внутри элемента nav, поэтому я думал, что могу сделать «height: 100%» на span, если я установил его в элемент встроенного блока, но это не сработало.

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

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

Answer 1

Это работает для вас?

ПРИМЕЧАНИЕ. Я дал родительскому элементу высоту 30vh, но он будет работать с любой/без определенной высоты. Просто вы видите, что он сосредоточен.

.parent { 
 
    position: relative; 
 
    background-color:blue; 
 
    width:100%; 
 
    height:30vh; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 50%; width:100%; 
 
    transform: translateY(-50%); 
 
    background-color:red; 
 
}

<div class="parent"> 
 
    <div class="child">Your random text..... Your random text.....</div> 
 
</div>