Is there a way to align images with text in an Outlook email template since vertical-align is not functioning properly? Are there any alternative methods

Hey there, I'm currently working on a Mail template and running into alignment issues with icons in certain versions of Outlook. It seems to be related to the Word rendering engine. Are there any alternative solutions available to ensure proper alignment between images and text in Outlook?

Icons not aligning with text.

<td style="background:#fff;">
  <h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
  <h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
  <p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
    <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> &nbsp;{{orderDate}}
  </p>

  // More code here...

  </table>

</td>

I've researched some solutions online but none seem to be effective. Please advise if there are any additional CSS properties that need to be added for compatibility with Outlook.

cssemailoutlookhtml-emailemail-templates

Answer №1

It seems that in order to make it compatible with Outlook, wrapping the content in a table is the only solution.

<tr>
  <td style="background:#fff;">
    <h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">YOUR ORDER</h2>
    <h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">ORDER #{{orderNumber}}</h3>
  </td>
</tr>
<tr>
  <td>
    <table width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td width="22">
          <!--Use this to control space between icon and text-->
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <!--No need to put width here. It will automatically size (and is responsive without a width) -->
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
          </p>
        </td>
      </tr>
      <tr>
        <td width="22">
          <p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
            <img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
          </p>
        </td>
        <td>
          <p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
        </td>
      </tr>
    </table>
  </td>
</tr>

I've included an additional 

<tr><td><table>
to avoid using colspan when utilizing two columns, preventing potential issues.

You now have the option to adjust spacing by adding padding to the <td> elements as needed.

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

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

javascriptjquerycsspseudo-element

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

javascriptjqueryhtmlcss

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

Is there a way to use the <form> element with the specified action attribute and a <button> element of type submit to create a button that functions as a hyperlink?

Here is my approach to creating stylish buttons. <span class='button button-orange' id='sign-up'><input type='button' value='Sign up here' /></span> When adding an anchor tag (with href) around th ...

htmlcssxhtml

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

javascriptjqueryhtmlcss

Text that is arranged vertically and adjusts its size and layout

I'm currently facing a challenge with vertical text display Check out my plunker What I'm attempting to accomplish is vertical text where: If a short text is placed inside the vertical text div, it should be aligned in the middle of the div I ...

htmlcsssassresponsive-design

The sup tag does not function properly when used within the title tag

I added a sup tag inside a title tag but it doesn't seem to work. Surprisingly, the same sup tag works perfectly fine within li tags. Can anyone explain why this is happening? I tried changing the title tags to H class tags but I'm still curious ...

htmlcss

Content towering over the footer

Can anyone help me figure out how to create a footer that appears behind the content when you scroll towards the end of a website? I've tried looking for tutorials online, but haven't found exactly what I'm looking for. Most of what I'v ...

jquerycsshtmlfooterslideup

How can I transform an HTML element into a textarea using CSS or JavaScript?

While browsing a webpage, I discovered a <div> element with the class .plainMail and I want to find a way to easily select all its text by simply pressing Ctrl+A. Currently using Firefox 22, I am considering converting the div.plainMail into a texta ...

javascripthtmlcss

The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...

htmlcssbootstrap-5font-awesome-5

Is there a way to decrease the speed of a text when hovering over it?

Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when ...

htmlcsscss-transitionspseudo-element

Utilize the before and after pseudo-elements to create a stylish divider

Utilizing Pseudo-elements :before and :after to create a line that appears before and after a title with the help of an image: .mydiv::before { content: url(img/line.png);} .mydiv::after { content: url(img/line.png);} Here is the current output: However ...

htmlcss

mapping buttons to images based on dynamic conditions

In my folder, I have over 1000 files. Using opendir, readdir, and is_dir, I can display the thumbnails of these files in my browser. Each thumbnail also has a corresponding button assigned to it. What I'm looking to do now is delete the 500th image wh ...

phpjavascripthtmlcssfile

Manipulate the css pseudo-element :after using jQuery's .siblings() method

How can I use jQuery to edit the :after element created by CSS? <div class="box"> <h3 class="social">Social</h3> <ul> <li><a href="https://www.youtube.com/" onmou ...

javascriptjqueryhtmlcss

Renaming file names for Bootstrap 4.5 demonstrations

Trying to utilize a Bootstrap 4.5 example, but running into issues when renaming the HTML or CSS files - it breaks the formatting link for the page. Is there a way to duplicate the original example files and modify the names (such as "my_page.html" or "m ...

cssbootstrap-4

Having trouble showing the image stored in the database on the webpage

I'm having trouble displaying my full image on my webpage from the database. Here is my code snippet: $con= mysqli_connect("localhost", "root", "", "project"); if(!$con) { die('not connected'); } ...

phpcssdatabase

CSS3 columns causing <li>s to be cropped

I'm attempting to implement css3 columns with a list (<li>), but I'm running into some issues getting it to function properly. I have wrapped the <ul> in a div like this: .ul-container { -moz-column-width: 310px; -moz-column-gap ...

htmlcssmultiple-columns

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

csssass

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

What is the best way to prevent <hr> from covering a <div> in CSS?

I'm currently facing a challenge in moving an <hr> element behind my div element. I have already tried positioning, but it didn't work as expected. The <hr> is still visible through the white parts, most likely because they are transp ...

htmlcss