Question 220459 in Html Question posted in
Some basic documentation can be found here.

Html – How to align the image inside the td with proper spacing

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

enter image description here

I want to have like this,

enter image description here

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search