I have been struggling to vertically center two elements, a div, and a label. I have tried multiple solutions like using relative/absolute positioning and display:table, but I just can't seem to get it to work as I want it to.
The tricky part is that the image in the label does not have a fixed height. It could be a maximum of 200x200 but could also be smaller. Additionally, the input button is approximately 16x16 in size.
I am limited in making significant changes to the HTML structure since it's not my code. Any help would be greatly appreciated!
Below is a simplified version of the code:
<ul>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
</ul>