I have div with a checkbox and some text inside of it. I want the text centered vertically, and the solution I found recommended setting the line-height of the div equal to the actual height which causes the text to be centered, the only problem is it breaks if I also include an <input type="checkbox">.
Other solutions from stack overflow also recommend using the line-height css: HTML-CSS Center Text horizontally and vertically in a link. So the typical solution to this problem will not work in my case without a workaround. Heres the relevant HTML code:
<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>
And relevant CSS:
.tag-box-div {
line-height: 60px;
height: 60px;
}
This CSS will correctly center the text in the "tag-box-div" if I comment out the <input>, but if I include the <input> the text will not be centered vertically. I am simply going to work around this, but I would like to know why this is happening. Django templating language if that matters.
