• Resolved rainerpuschner

    (@rainerpuschner)


    This is what i want to achieve, but for some reason the font in the middle is not centered vertically nor is the button… what am i missing?

    <span style="align-items: center;justify-content: center"><img style="padding-right: 30px" height="40px" src="https://meintempo.at/wp-content/uploads/2022/08/yinyangwhite.png">Bist Du YIN oder YANG?<a href="https://meintempo.at/yinyang-test/" class="button" style="background:#ef7ac4;color:#fff">JETZT TESTEN</a></span>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author rpetersen29

    (@rpetersen29)

    Hi @rainerpuschner, you need to add display: flex; to your styling.

    Thread Starter rainerpuschner

    (@rainerpuschner)

    unfortunately this did not work as expected… i have added “display: inline-block” to the CSS and it looks good on desktop, but the font baseline on mobile is not in the vertical center…

    <span style="vertical-align: middle;align-items: center;padding-top: 0px"><img style="align-items: center" height="30px" src="https://meintempo.at/wp-content/uploads/2022/08/yinyangwhite.png"></span><span style="padding-top:0px;text-align: center;justify-content: center;padding-right: 10px;padding-left: 10px">Bist Du YIN oder YANG?</span><span style="padding-top: 0px"><a href="https://meintempo.at/yinyang-test/" class="button" style="text-align: center;background:#ef7ac4;color:#fff;padding: 5px 20px;border-radius: 50px">JETZT TESTEN</a></span>

    You can watch the banner live on https://meintempo.at … when viewed on mobile it look like the baseline is the lower end of the logo on the left, on desktop the baseline looks good and the font is centered vertically.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling Simple Banner with an Image and a button’ is closed to new replies.