I don’t understand why they are different. On desktop, I can inspect from source, seeing .replay-button class has vertical-align: middle. On iOS, the same should be true, right? Is the replay button styled differently in AnkiMobile than in Anki desktop? Or is this a problem of WebKit engine used by AnkiMobile?
And last, how to vertically center replay button with adjacent text, in a way that works both in desktop Anki and AnkiMobile? To be specific, I want the replay button to be placed in and at the beginning of the first line of a multi-line sentence, and being vertically centered in the line, like so (rendered on desktop):
I’m aware of the flex box solution. But it’s not exactly what I want. With flex box, the button is vertically centered with the entire sentence block rather than just its first line, and an entire column of space is taken by that button, which is quite wasteful on a narrow iPhone screen, like so:
My knowledge of CSS is not very deep, and I can’t tell you anything about why this is appearing differently between the two Anki versions, but here’s what occurs to me –
What’s the vertical alignment of the text? Since you’re not setting that to anything, what is it defaulting to? Are the underlying defaults different in the two web engines (Qt 5 or 6 on Desktop, and … whatever it is on iOS)?
I also don’t know CSS very well. But to answer your question, I made some experiments, with weird findings … (Maybe not weird at all, if only I understand the nuances of line height, x-height, whatever in CSS)
I tried to access the computed value of vertical-align of both replay button and the text next to it, and print it out in the card. To make it possible to get properties of text, I had to wrap it in a <span>. So the template has been adjusted to this:
OK, two platforms have different default vertical alignment for .replay-button. Now you would think that was the problem, except… changing it to middle doesn’t change anything. In fact, I tried all combinations: