How can I set the text to be in the center of a VML

For my email template, I need to center text over an image. Although I attempted a solution from this source, the image is not being displayed. Below is the code snippet:

<div align="center" style="margin: 0; padding: 0;">
    <table border="0" cellspacing="0" cellpadding="0" width="80%" style="width:45em;padding:0;margin:0;border-spacing:0;">
        <tbody>
            <tr>
                <td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg"  style="background-size: 100% 100%;height:15em;text-align: center;">
                  <!--[if gte mso 9]>
                  <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 700px; height: 250px;" src="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg" />
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 700px; height: 230px;">
                    <v:fill opacity="0%" color="#111111"  />
                    <v:textbox inset="250px,180px,0px,0px" style="mso-text-scale: 26px; mso-fit-text-to-shape: false; ">
                      <![endif]-->
                      <div align="right">
                        <h1 style="color: #fff; text-transform: uppercase; font-size: 2em;margin-bottom: 1em;">|||Some text in caption here|||</h1>
                        </div>
                      <!--[if gte mso 9]>
                    </v:textbox>
                    </v:fill>
                  </v:rect>
                  </v:image>
                  <![endif]-->
                </td> 
            </tr>
        </tbody>
    </table>

The display looks good on certain Outlook window sizes, but how can I adjust the text alignment horizontally to be centered?

Answer №1

When discussing horizontal centering, it is necessary to include a table with a centered cell inside the <v:textbox> tag. Here's an example:

<!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"><v:fill type="tile" src="/path/to/image" color="#343434" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="800" align="center" style="text-align: center;">Centered content</td>
        </tr>
    </table>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

Answer №2

The background attribute won't display as intended in Outlook unless it's a background color, not an image URL:

<td valign="bottom" height="300" background="https://parentingwalkthrough.com/wp-content/uploads/2018/12/EmailHeader_Image.jpg"  style="background-size: 100% 100%;height:15em;text-align: center;">

In Outlook, Word is used to render message bodies, which limits certain HTML elements and CSS properties that can be supported. Check out these articles for more information:

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

The color of the textbox does not remain when it is focused

I've developed a custom CSS button style, which you can see here: http://jsfiddle.net/karimkhan/SgTy2/ However, when I implement the same CSS within the <style> tags on my page, the effect is not the same. It looks like this: The actual CSS on ...

Is the MDL drawer not reaching the full height of the page?

I am currently utilizing Material Design Lite to incorporate a fixed header and drawer into my Ruby on Rails application. In the following video, you can observe that when I switch to another page, the drawer menu on the left side of the page fails to fill ...

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

Hide the search results if the user leaves the input field blank

I am trying to implement Live Search JSON Data Using Ajax jQuery, and I want to be able to search through multiple JSON files. When the page initially loads with an empty input field, no results are displayed. However, if you type and then delete text in ...

What is the process for sending emails via PHP to a GMail account?

It seems like this code: <?php $emailTo = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41343224337001262c20282d6f222e2c">[email protected]</a>'; $subject = 'I hope this wo ...

Customize the default getstream component styles in a NextJS Component

Is there a way to customize the CSS of getStream.io components using custom CSS? I have created a component as shown below and now I want to override the styles for various classes of its components. Following the instructions in this README file, I impor ...

Increase the distance between input boxes using CSS styling

I'm encountering an issue with adding spacing between input boxes, despite attempting to use padding. The padding only seems to move the boxes instead of creating space between them. Here is my code: ...

Upon clicking the navbar dropdown item, it shifts its position

I am currently working on setting up a navigation bar with multiple items aligned to the right side. However, I have encountered an issue where clicking on the "notification" icon causes the other icons in the navbar to move instead of remaining fixed in p ...

Unable to implement CSS styles on the provided HTML code

I'm currently working on integrating evoPDF into my asp.net application. When I click on a part of the HTML file, I send that portion using AJAX. So far, everything is working well up to this point. However, when I try to use the following methods fro ...

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

Searching for a JavaScript tool that offers syntax highlighting capabilities

I have come across some excellent RTE HTML text editors such as jsredaktor, TinyMCE, and FCK Editor, but I am in search of an HTML/JavaScript component that functions similarly to a TEXTAREA with built-in code syntax highlighting. ...

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

What are some ways to ensure a JQM-created button is clickable in Firefox?

I am working on making a div clickable in a jQuery Mobile powered website. The current code I have functions properly in Chrome and Safari, however, it does not work in Firefox - both on desktop and Android FF. <button data-icon="eye"> <a href ...

Utilizing Bootstrap 4 to ensure the final DIV is vertically stacked and fills the remaining space in the container

Having trouble creating a responsive layout using Bootstrap 4? Specifically, when two divs wrap vertically on smaller devices, the top div pushes the lower div down, exceeding the parent container. I want the lower div to fit within the container. How can ...

What is the best way to automatically increase the value of another column in SQL when the primary key is set to auto

In my database, I currently have a table storing customer details. I am looking to introduce a new column that will provide either existing or new customers with a unique auto-incremented ID for identification purposes. Additionally, I require a primary ke ...

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is it feasible to modify the CSS of an iframe if the iframe is not located on the same domain? If so, what are some ways to apply and alter CSS for this situation? Any assistance would be greatly appreciated. <iframe id="frame1" width="100%" height="35 ...

Manipulate HTML elements using JavaScript when a key is being held down

I'm currently developing a simple game using vueJS for the frontend. I have successfully created all the necessary objects and now my goal is to enable their movement when a key is pressed. However, I am facing an issue where the object only moves on ...

Activate all chosen CSS circles

I'm currently working on creating a progress bar using CSS circles. The idea is that when you click on each circle in sequence (1, 2, 3), all three circles and the line connecting them will fill up with red color. If you then go back (3, 2, 1), the co ...

Included adaptable background-images in the upload

Recently, I developed a RoR based app/website that allows clients to upload their own background image to the cover page. Although the current setup works well with a single image, I am aiming to enhance the site's responsiveness by enabling clients t ...

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...