How to align the image inside the td with proper spacing

I want to align the image properly inside the td for the following.

I want to have like this,

I've written MJML code and generated the CSS.

<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
  <tbody>
    <tr>
      <td align="right" style="font-size:0px;padding:10px 0;word-break:break-word;">
        <!--[if mso | IE]>
                <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" >
                    <tr>
                        <td>
                            <![endif]-->
        <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
          <tr>
            <td style="padding:4px;vertical-align:middle;">
              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:20px;">
                <tr>
                  <td style="font-size:0;height:5px;vertical-align:middle;width:20px;">
                    <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com" target="_blank">
                      <img height="20" src="{{ $message->embed(public_path('assets/theme/generics/social/external_mail/facebook.png')) }}" style="border-radius:3px;display:block;" />
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!--[if mso | IE]>
                        </td>
                        <td>
                            <![endif]-->
        <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
          <tr>
            <td style="padding:4px;vertical-align:middle;">
              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:20px;">
                <tr>
                  <td style="font-size:0;height:5px;vertical-align:middle;width:20px;">
                    <a href="https://twitter.com/intent/tweet?url=https://twitter.com" target="_blank">
                      <img height="20" src="{{ $message->embed(public_path('assets/theme/generics/social/external_mail/twitter.png')) }}" style="border-radius:3px;display:block;" />
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!--[if mso | IE]>
                        </td>
                        <td>
                            <![endif]-->
        <table align="right" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
          <tr>
            <td style="padding:4px;vertical-align:middle;">
              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:20px;">
                <tr>
                  <td style="font-size:0;height:5px;vertical-align:middle;width:20px;">
                    <a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.linkedin.com/company/&title=&summary=&source=" target="_blank">
                      <img height="20" src="{{ $message->embed(public_path('assets/theme/generics/social/external_mail/linkedin.png')) }}" style="border-radius:3px;display:block;" />
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <!--[if mso | IE]>
                        </td>
                    </tr>
                </table>
                <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

Solution

You should try this code. This will work in your case.

<mj-style>
  /* Adjust the styles as needed */
  td {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
  }
  td img {
    max-width: 100%; /* Optional: Ensure the image doesn't exceed the cell width */
  }
</mj-style>