Search code examples
csshtml-email

Vertical align a text to the middle of a button that includes a full heigh image to send as email

I know there are a lot of similar questions, but the solutions don't seem to work.

I think that's because the button includes an image with style="height:100%;" (but I'm not sure)

Note: the button is to use on an email, so I'd say it's better to use inline css.

My last attempt has been including a span within the button for the text only:

<button style="height:100px; font-size:24px; color:white; background-color: #4CAF50; "><img style="height:100%;" src="https://i.imgur.com/XcXLJBA.png"> <span style="margin-bottom: 20px; line-height: 150px;">Send WhatsApp</span></button>

The output is this:

output button

I've also tried to add to several places (with no result): display: table-cell; vertical-align: middle;

I've not more ideas. How to center that text vertically to the center?

Solution

  • to demonstrate my earlier comment

    img,span {vertical-align:middle; }
    <button style="height:100px; font-size:24px; color:white; background-color: #4CAF50; "><img style="height:100%;" src="https://i.imgur.com/XcXLJBA.png"> <span >Send WhatsApp</span></button>