-1

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?

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
chelder
  • 3,819
  • 6
  • 56
  • 90

1 Answers1

0

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>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • I would swear that I also have tried `vertical-align:middle;` !! I guess I didn't in the correct place. Weird. Thanks!!! – chelder Sep 23 '20 at 12:01