Vertically centre replay button relative to adjacent text

Card Design
1

I have a card type with this back template:

<div class="reading">{{furigana:Reading}}{{Audio}}</div>

and this styling:

.reading { width: 60%; padding: 2%; line-height: 1.5; border-radius: 7px; margin: 10% auto 0; }
.replay-button { display: inline; }

I have tried all sorts of tricks to get the replay button to be vertically centred relative to the text in the Reading field, but to no avail. In the end, either the bottom of the button aligns with the bottom of the text, or the top of the button aligns with the top of the text. Is there any way to get the vertical centre of the button to align with the vertical centre of the text?

2

I assume that you are probably using the Japanese Support add-on, because your template includes {{furigana:...}}.

If this means “the vertical centre of the total height of furigana and text”, then you can achieve that with something like the following:

Template

<div class="reading">
    <span class="reading-text">{{furigana:Reading}}</span>
    <span class="reading-audio">{{Audio}}</span>
</div>

Styling

.reading {
    display: flex;
    align-items: center;
    line-height: 1;
}

.reading-audio {
    display: inline-flex;
}

Screenshot

(for clarity, the font size is increased and a red border is added)

japanese-support-replay-button-alignment
japanese-support-replay-button-alignment1179Ă—543 41.4 KB

5 Likes
3

That’s perfect! Your solution encouraged me to learn more about the flexbox layout system, and I discovered a few other useful features that I’ve implemented to create the exact layout I had in mind.

Thank you very much for having taken the time to help me. I appreciate your generosity.

1 Like