OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can i, set number an inside image center?

  • Thread starter Thread starter Arunachalam A
  • Start date Start date
A

Arunachalam A

Guest

I need to ensure that an image is centered number in an HTML email. While the HTML code works correctly in a Chrome browser, I need help with making it display correctly in an email client.​


I am give code,i am using php mailer -- mail.php file below showing

Code:
Body =`<table style="width: 100%; text-align: center;">
<tr>
<td align="left" valign="top" style="padding-bottom: 10px;">
  <p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px">
    What’s next?</p>
  <div style="background: #F9F9F9; border-radius: 12px; padding:35px 30px">
    <div style="display:flex">
      <div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
        <img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
        <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">1</span>
      </div>
      <div>
        <div>
          <a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Complete your account</a>
          <p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Lots of people make mistakes while creating paragraphs Some writers just put whitespace in their text</p>
        </div>
        <div class="separator separator-dashed" style="margin:17px 0 15px 0"></div>
      </div>
    </div>
    <div style="display:flex">
      <div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
        <img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
        <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">2</span>
      </div>
      <div>
        <div>
          <a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Communication Tool</a>
          <p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Craft a headline that is both informative and will capture readers’ improtant attentions</p>
        </div>
        <div class="separator separator-dashed" style="margin:17px 0 15px 0"></div>
      </div>
    </div>
    <div style="display:flex">
      <div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
        <img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
        <span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">3</span>
      </div>
      <div>
        <div>
          <a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Task Planner</a>
          <p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Use images to enhance your post, improve its flow, add humor, and explain complex topics</p>
        </div>
      </div>
    </div>
   
  </div>
  
</td>
</tr>
</table>`

enter image description here When sending an HTML template via email, I've noticed that the polygon-shaped image with a number inside is misaligned. How can I ensure that the number inside the image is centered correctly in the email?
<h1>I need to ensure that an image is centered number in an HTML email. While the HTML code works correctly in a Chrome browser, I need help with making it display correctly in an email client.</h1>
<p>I am give code,i am using php mailer -- mail.php file below showing</p>
<pre><code>Body =`<table style="width: 100%; text-align: center;">
<tr>
<td align="left" valign="top" style="padding-bottom: 10px;">
<p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px">
What’s next?</p>
<div style="background: #F9F9F9; border-radius: 12px; padding:35px 30px">
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
<img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
<span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">1</span>
</div>
<div>
<div>
<a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Complete your account</a>
<p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Lots of people make mistakes while creating paragraphs Some writers just put whitespace in their text</p>
</div>
<div class="separator separator-dashed" style="margin:17px 0 15px 0"></div>
</div>
</div>
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
<img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
<span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">2</span>
</div>
<div>
<div>
<a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Communication Tool</a>
<p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Craft a headline that is both informative and will capture readers’ improtant attentions</p>
</div>
<div class="separator separator-dashed" style="margin:17px 0 15px 0"></div>
</div>
</div>
<div style="display:flex">
<div style="display: flex; justify-content: center; align-items: center; width:40px; height:40px; margin-right:13px;position: relative;">
<img alt="container" src="https://example.com/assets/mail/icon-polygon.png" />
<span style="position: absolute; color: #50CD89; font-size: 16px; font-weight: 600; top: 50%; left: 50%; transform: translate(-50%, -50%);">3</span>
</div>
<div>
<div>
<a href="#" style="color:#181C32; font-size: 14px; font-weight: 600;font-family:Arial,Helvetica,sans-serif;text-decoration: none;">Task Planner</a>
<p style="color:#5E6278; font-size: 13px; font-weight: 500; padding-top:3px; margin:0;font-family:Arial,Helvetica,sans-serif">Use images to enhance your post, improve its flow, add humor, and explain complex topics</p>
</div>
</div>
</div>

</div>

</td>
</tr>
</table>`
</code></pre>
<p><a href="https://i.sstatic.net/JfjqU9O2.png" rel="nofollow noreferrer">enter image description here</a>
When sending an HTML template via email, I've noticed that the polygon-shaped image with a number inside is misaligned. How can I ensure that the number inside the image is centered correctly in the email?</p>
Continue reading...
 

Latest posts

Top