将文本垂直对齐到包含全高图像的按钮中间以作为电子邮件发送

Question

我知道有很多类似的问题，但解决方案似乎都行不通。

我认为这是因为该按钮包含带有 style="height:100%;" 的图像（但我不确定）

注意：该按钮用于电子邮件，所以我认为最好使用内联 css。

我最后的尝试是在按钮中包含一个仅用于文本的跨度：

<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>

输出是这样的：

我也尝试添加到几个地方（没有结果）：display: table-cell; vertical-align: middle;

我没有更多的想法。如何将该文本垂直居中到中心？

Answer 1

证明我之前的评论

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>

将文本垂直对齐到包含全高图像的按钮中间以作为电子邮件发送

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

css

html-email