Hello, I'm having some trouble with my button, the text is aligning to the top of the td in web clients and I can't seem to get it aligned to the middle, don't suppose anyone has had anything similar? Or any ideas on how to fix it?

Thank you!

Code for my button:


<tr>
                          <td width="180" class="" align="left" height="41" style="height:31px; mso-line-height-rule: exactly;">
                            <table width="180" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
                              <tr>
                               <td width="16" height="41" align="left" bgcolor="#f63c48"><img src="http://image.nationwide-communications.co.uk/lib/fe9915737560007a76/m/4/ag-red-button-left.png" width="16" height="41" border="0" style="display:block; width:16px; height:41px;" alt=""></td>

                               <td width="137" height="41" align="left" valign="middle" bgcolor="#f63c48" style="font-size: 16px; font-family:'Arial', sans-serif; line-height: 16px; color: #ffffff; font-weight: normal; text-align:center; vertical-align: middle; mso-line-height-rule: exactly; display: block; background-color: #f63c48; padding: 0 0 0 0;"><a href="#" style="color:#ffffff; text-decoration:none;" target="_blank"><span style="color:#FFFFFF; font-size:16px; text-decoration: none; vertical-align: middle; text-align: center;">Find out more</span></a></td>

                               <td height="41" width="27" align="left"><a href="#" style="color:#ffffff; text-decoration:none;" target="_blank"><img src="http://image.nationwide-communications.co.uk/lib/fe9915737560007a76/m/4/ag-red-button-right.png" width="27" height="41" border="0" style="display:block; width:27px; height:41px;" alt=""></a></td>
                             </tr>
                           </table>
                          </td>
                        </tr>