Stupid Simple Vertical Align (again)

[ChenXiu]

I would think something this simple would work:

<span style="border: 2px solid black;">
<input type="checkbox">
<span style="vertical-align: middle; position: relative;">Not Vertically Centered</span>
</span>

I know I can acheive the desired effect with "flex," "display:table-cell," etc., however I am questioning the aforementioned code.

Questions:
1.) Why doesn't this work?
2.) What is needed to make this work?
3.) Why is CSS always like this for me?

Thank you.

[maxxd]

1. Honestly, no idea. I feel like at some point back in the day I made vertical-align work, but I haven't thought about it for so long that I have no idea how.

2. flex or grid

3. There's nothing wrong with the code you've posted, and using flexbox will get you the result you want. You just need to adopt it - there's not a browser available that can't handle it natively at this point and as you've clearly seen, the struggle is real without it.