Outlook signature with HTML in Exchange

I was asked to do a general signature in Outlook. After watching some tutorials, I wrote a code in HTML to put it in Exhange.

The problem is that in Outlook App the items next to the icons are not center, but if I execute the .html file It looks correct.

Does anybody know where I'm failing?

Here's my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Logo Firma</title>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td style="border-right: 3px solid #007cc2;"><img style="padding-right: 10px; display: flex;" src="https://i.postimg.cc/26xJ0Pz7/logo.png"></td>
                    <td>
                        <table style="font-family: Arial, Helvetica, sans-serif; color: #111628; padding-left: 10px;">
                            <tbody>
                                <!--NOMBRE DE LA PERSONA-->
                                <tr><td style="font-size: 14px; font-weight: bold;">Full Name</td></tr>
                                <!--DEPARTAMENTO AL QUE PERTENECE-->
                                <tr><td style="font-size: 12px; font-weight: bold;">Area</td></tr>
                                <!--TELEFONO DE LA EMPRESA E INTERNO-->
                                <tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/zDSGNj8H/phone.png"> 22223344</td></tr>
                                <!--CELULAR-->
                                <tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/NMRf58XV/smartphone.png"> +123 94333222</td></tr>
                                <!--PAGINA WEB DE LA EMPRESA-->
                                <tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/vHYHZVZq/globe.png"> <a style="text-decoration: none; color: #111628;" href="www.akesse.com.uy/" target="_blank"> Pagina Web</a></td></tr>
                                <!--DIRECCION DE LA EMPRESA-->
                                <tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"> Somewhere<br>City, Country</td></tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

This is how it looks on Google Chrome This is how it looks on Outlook App

I don't know what else to do, I've try modifying CSS styles but It did not result as I expected.

Solution

Outlook (desktop Windows?) doesn't support display:flex, or any changes to display. You have to use a td for the image, and another td for the text, and use padding and line-height to vertically center them.

So, untested:

<tr><td style="padding: 5px;"><img width="20" height="20" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"></td><td style="padding: 5px; font-size: 12px;line-height:16px;"> Somewhere<br>City, Country</td></tr>

Note the use of width= and height=, needed for Outlook (it doesn't recognise style="width..." in the img tag).