HTML / JS为什么包含复选框会中断行高垂直文本居中

Question

我的div带有一个复选框，其中包含一些文本。我希望文本垂直居中，因此我发现了一种解决方案，建议将div的行高设置为实际高度，以使文本居中，唯一的问题是，如果我还包含一个<input type="checkbox">，它将损坏。

堆栈溢出的其他解决方案也建议使用行高CSS：HTML-CSS Center Text horizontally and vertically in a link。因此，如果没有解决方法，就我而言，此问题的典型解决方案将无法正常工作。以下是相关的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;
}

如果我注释掉<input>，则此CSS将在“ tag-box-div”中使文本正确居中，但是如果包含<input>，则文本将不会垂直居中。我只是要解决此问题，但我想知道为什么会这样。 Django模板语言是否重要。