HTML / JS Почему включение флажка Разрыв строки-Высота Вертикальное центрирование текста

Question

У меня есть div с флажком и текстом внутри него. Я хочу, чтобы текст располагался по центру по вертикали, и решение, которое я нашел, рекомендовало установить высоту строки div, равную фактической высоте, которая приводит к центрированию текста, единственная проблема - это разрыв, если я также включаю <input type="checkbox">.

Другие решения от переполнения стека также рекомендуют использовать высоту строки css: HTML-CSS Center Текст по горизонтали и вертикали в ссылке . Таким образом, типичное решение этой проблемы не будет работать в моем случае без обходного пути. Вот соответствующий HTML-код:

    <div class="advanced-filter">
        {% for tag_type in tag_types %}
            <div class="tag-box-div">
                    <input class='tag-box' type="checkbox" id="tag-box-{{tag_type.char}}">
                    {{tag_type.name}}

            </div>
        {% endfor %}
    </div>

и соответствующие CSS:

.tag-box-div {
    line-height: 60px;
    height: 60px;
}

Этот CSS будет правильно центрировать текст в «tag-box-div», если я закомментирую <input>, но если я включу <input>, текст не будет центрирован по вертикали. Я просто собираюсь обойти это, но я хотел бы знать, почему это происходит. Язык шаблонов Джанго, если это имеет значение.