Exactly what the title says. How do I vertically center text? I have tried various css solutions, but nothing works well. I am finding vertical aligning things very difficult.
You didn’t supply an example of the content of your float-box, and as you’ve already discovered what is being vertically centred can influence what method you use.
If I assume your usage is as simple as…
(float-box: "=X=","=Y=")[Float box contents]
…then used the Web Developer Tools of my web-browser to Inspect the generated HTML elements I would see something like the following…
tw-expression type="macro" name="float-box" return="changer"></tw-expression>
<tw-hook style="display: block; width: 33.3333vw; max-width: 33.3333vw; left: 33.3333vw; box-sizing: content-box; overflow-y: auto; height: 33.3333vh; position: fixed; top: 33.3333vh; padding: 1em; background-color: rgb(0, 0, 0);">Float box contents</tw-hook>
…and learn that the specific arguments I passed to the (float-box:) macro caused the end result to have a height of 33.3333vh
As my example has only a single line of text I could alter its line-height using a CSS rule like the following…
tw-expression[name="float-box"] + tw-hook {
line-height: 33.3333vh;
}