Bootstrap, сохраняя высоту заголовка с элементом <strong>

Question

У меня есть складная боковая панель, и когда она свернута, заголовок сжимается до отображения букв «J L».Это работает, но я не могу найти золотую середину между пустым заголовком и последующим добавлением моих букв.

Так что, если я закомментирую свой элемент там, где нет текста, пустой заголовок идеально соответствует высоте 40px.

Но когда я добавляю буквы, он выше 40px.Так что я знаю, что мой рост работает для CSS заголовка, но мне нужно, чтобы он оставался 40px и включал JL как сильный элемент, который полностью центрирован.

Вот изображения, показывающие проблему:

До После

Поэтому мне нужно включить элемент Strong, но сохранить высоту 40px, чтобы зеленые полосы продолжали касаться

 #sidebar.active .sidebar-header{
    	height:40px !important;
    }

    #sidebar.active .sidebar-header strong {
        display:block;
    }

<nav id="sidebar">
		<div class="sidebar-header">
			<strong>J L</strong>
		</div>
    </nav>


   

Answer 1

Добавьте line-height к элементу <strong>, например:

#sidebar.active .sidebar-header{
        height:40px !important;
    }

    #sidebar.active .sidebar-header strong {
        display:block;
        line-height: 30px;
        padding-top: 0px;
        padding-bottom: 0px;

    }