What are some solutions to correcting alignment issues in an HTML email containing both an image and a centered number?

"I'm facing an issue with sending an HTML email template. The problem lies in the alignment of a polygon-shaped image with a number inside. Despite efforts to center the number within the image, it appears misaligned when viewed in the email. How can this alignment issue be fixed?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <table>
      <tbody>
        <tr style="display: flex; justify-content: center; margin:0 60px 35px 60px">
          <td align="start" valign="start" 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://dev-beta.becomeaskiller.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 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://dev-beta.becomeaskiller.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 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://dev-beta.becomeaskiller.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>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

In my attempts to send out an HTML email template, I've encountered an alignment issue with a polygon image containing numbers. Despite trying to center the numbers within the images, they still appear misaligned in the email. What steps can be taken to rectify this alignment problem?

htmlcss

Answer №1

It's not exactly clear what your end goal is, but here is a simplified version of the sample code that does something similar to what I think you're trying to achieve.

The idea is to use the image as a background for the number inside the div and utilize flex properties to ensure that the number is centered properly within the image.

.container {
  background: #AAA; 
  border-radius: 12px; 
  padding: 35px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tile {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 40px; 
  height: 40px; 
  position: relative;
  background-image: url(https://dev-beta.becomeaskiller.com/assets/mail/icon-polygon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  
}
.tile-number {
  color: #50CD89; 
  font-size: 16px; 
  font-weight: 600;
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <table>
      <tbody>
        <tr style="display: flex; justify-content: center; margin:0 60px 35px 60px">
          <td align="start" valign="start" style="padding-bottom: 10px;">
            <p style="color:#181C32; font-size: 18px; font-weight: 600; margin-bottom:13px">
              What’s next?
            </p>
            <div class="container">
              <div class="tile">
                <span class="tile-number">1</span>
              </div>
              <div class="tile">
                <span class="tile-number">2</span>
              </div>
              <div class="tile">
                <span class="tile-number">3</span>
              </div>
            </div>
          </td>
        </tr>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on a DIV element with the contenteditable attribute set to "true" does not automatically focus the element

Currently, I am using jQuery to dynamically add the content editable attribute to a DIV element. $('div').attr('contenteditable', 'true'); However, when I click on this newly modified DIV, it does not exhibit the focus effec ...

javascriptjqueryhtmlcontenteditable

Ways to display scrollbar even when inner container lacks fixed height within a fixed position outer container

I am trying to display a scrollbar in an inner container without specifying a fixed height, while the outer container has a fixed position. However, I am encountering an issue where setting a fixed height for the innerContainer results in content being hid ...

htmlcssreactjsscrollbarcss-position

Appear gradually when the page is first loaded

I am looking to create a fade-in effect for the background of an entry inside a div element. The goal is to highlight the most recent entry when the page loads. It should happen automatically on page load, without requiring any click or hover events. Her ...

jquerycss

Tips for retaining user input in an input box using HTML and AngularJS

Is there a way to retain a user's input in an input box? This is the current code snippet: <input type="text" ng-model="userText" placeholder="Enter text here"> However, I am looking for a solution that will allow the entered text to persist ...

javascripthtmlangularjs

Using PHP to Showcase Search Results from a Text File on an External HTML Page

I am currently working on building an HTML form in my index.html file that will allow me to search a text file for a specific line of characters using PHP through the searchFile.php file, retrieve that specific line, and display it within the form on the i ...

phpjqueryhtmlajax

Is there a downside to concealing a checkbox off-screen using position: absolute for a clever workaround?

I recently came across a clever trick known as the checkbox hack, which involves hiding checkboxes on web pages by positioning them off-screen. The example provided on CSS Tricks demonstrates this technique with the following code: position: absolute; top ...

css

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

javascriptcssvue.js

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

phpjavascriptjqueryhtml

React Bootstrap ToggleButton firing function multiple times unnecessarily

I've encountered an issue with my react-bootstrap ToggleButtons. Whenever I click on them, the handlePlatformChange() function is triggered twice - first with the correct id and then immediately after with null. I tried including e.preventDefault() in ...

javascriptcssreactjsbootstrap-4react-bootstrap

An issue occurred while attempting to hover over the text in the SVG map

I have a United States map. This code contains CSS for styling the map with different colors for each state. It also includes an SVG image of the map and text labels for each state name. However, there is an issue with the hover effect on the state name ...

htmlcsssvghover

CSS Dialect Debate: Container or Wrapper - Which is the Best Term to

Can you explain the distinction between a container and a wrapper, as well as their respective meanings? ...

htmlcss

Ways to adjust color schemes in a grav template

Struggling with what should be a simple task. I have a website on Grav, utilizing a theme based on antimatter. The theme is mainly inherited and works perfectly fine. My goal is to make some color adjustments, specifically altering the background color of ...

cssgrav

Simply tap on any part of the row to select the checkbox and bring attention to it?

Is there a way to make rows in a table selectable by clicking anywhere on the row? I have a script that displays checkboxes next to each result from a MySQL database, but I want users to be able to click anywhere on the row to select it and highlight the e ...

javascriptphphtmlmysqlcss

Fuzzy text on the web browser, Internet Explorer

After analyzing my website, I have observed a significant contrast in text quality when viewed on Firefox, Chrome, and Internet Explorer. While the text appears crisp and clear in Chrome and even more so in Firefox, it seems to be blurred and lacking focus ...

htmlcssinternet-explorer

Obtaining IDs of Divs that have been Dragged into a Drop Zone upon Clicking a Button using JavaScript

I'm currently working on a solution to extract the ids of dragged divs once they have been placed in the drop zone. Each drag component is assigned an id ranging from drag1 through drag8, while the drop zone is labeled as div drop zone. Since there a ...

javascriptjqueryhtmlcss

Currently focusing on improving the responsiveness of the navigation bar and grid layout

I'm facing a new challenge I can't seem to crack: Despite setting my grid boxes to be responsive with 1fr column and (6, fr) row, they are displaying poorly on mobile devices. Additionally, my navbar remains fullwidth and mobile-like even when i ...

htmlcss

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

Choosing radio buttons within rows that contain two radio buttons using ngFor

This section showcases HTML code to demonstrate how I am iterating over an array of objects. <div class="row" *ngFor="let item of modules; let i = index;"> <div class="col-md-1 align-center">{{i+1}}</div> <div class="col-md- ...

htmljsonangulartypescriptngfor

Tips on invoking a factory method from a different service method in AngularJS

I have a factory method that goes like this.. (function (angular) { "use strict"; angular .module('app') .factory('UserService', ['$rootScope', '$q', function ($rootScope, $q) { ...

javascripthtmlangularjsinterceptorfactory-method

Angular table elements can trigger a click event that redirects to a unique URL generated from the ID of the selected element

In the angular table, every element should be clickable. When any element in the table is clicked, it should use its ID to perform a new search and redirect to the URL based on that ID of the clicked element. Below is the JSON data from the initial URL. It ...

javascripthtmlangularjsjsonangularjs-ng-click