How to align the image inside the td with proper spacing

Question

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>

Answer 1

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>

Answer 2

how about using position:relative for your container and position:absolute for your images which you want to change their place and change their position with bottom,top,right,left css properties but use % as unit while you are dealing with these four attributes because using other units causes problem for responsiveness. e.g:

.container{
position:relative
}

.image-1{
position:absolute;
right:3%;
}

Answer 3

Are you using the mj-social tag in MJML? If yes, then there shouldn't be an alignment problem.

Check the following example: https://mjml.io/try-it-live/6zI7es-2ZK

<mjml>
  <mj-body>

    <mj-section padding="50px" background-color="#F5F2EE">
      <mj-column>

        <mj-social padding="0px" mode="horizontal">
          <mj-social-element icon-size="24px" padding="0px 10px" src="https://mcusercontent.com/58cc6fdf204aea6e7442682a9/images/55d3502b-3868-12a8-ab9d-87a3d12a9032.png" href="https://www.facebook.com"> </mj-social-element>
          <mj-social-element icon-size="24px" padding="0px 10px" src="https://mcusercontent.com/58cc6fdf204aea6e7442682a9/images/3addb932-a68a-4b89-3f41-7ef7266cb63b.png" href="https://www.instagram.com"> </mj-social-element>
          <mj-social-element icon-size="24px" padding="0px 10px" src="https://mcusercontent.com/58cc6fdf204aea6e7442682a9/images/5fa019f8-ae25-e992-c483-9ad0ebbb94a9.png" href="https://twitter.com"> </mj-social-element>
        </mj-social>

      </mj-column>
    </mj-section>


  </mj-body>
</mjml>