Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically.

 <div style='width: 80%; margin: auto; position: relative;'>
            <div style='height: 40px; margin-bottom: 2px; background-color: rgb(68, 228, 60); float: left; width: 60%;'></div>
            <div style='height: 40px; margin-bottom: 2px; background-color: rgb(227, 243, 121); float: left; width: 20%; text-align: left;'></div>
            <div style='height: 40px; margin-bottom: 2px; background-color: rgb(236, 74, 16); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;'></div>
            <div style='border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); width: 30%; text-align: right; font-weight: 600; font-family: 'Verdana', Tahoma, Geneva, sans-serif; line-height: 40px; vertical-align: middle; border-radius: 0px 5px 5px 0px;'>30%&nbsp&nbsp</div>
    </div>

<table style="width: 80%; margin: auto; position: relative;">
        <td style="vertical-align: middle; height: 40px; margin-bottom: 2px; background-color: rgb(68, 228, 60); float: left; width: 60%;"></td>
        <td style="vertical-align: middle; height: 40px; margin-bottom: 2px; background-color: rgb(227, 243, 121); float: left; width: 20%; text-align: left;"></td>
        <td style="vertical-align: middle; height: 40px; margin-bottom: 2px; background-color: rgb(236, 74, 16); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;"></td>
        <td style="vertical-align: middle; border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); 
            width: 35%; text-align: right; font-weight: 600; font-family: 'Verdana', Tahoma, Geneva, sans-serif; border-radius: 0px 5px 5px 0px;">35%&nbsp;&nbsp;</td>
    </table>

also attempted using the table snippet...but it's not working as expected.

Any advice on how to make this work?

htmlcssoutlookhtml-emailtext-align

Answer №1

Try using the table component instead of a div to ensure compatibility with all browsers.

Answer №2

To center the text vertically within a div, one can utilize the CSS properties 'display: table' and 'display: table-cell'.

By applying display: table-cell to the inner div, it transforms into a table cell allowing for the use of the vertical-align: middle property to achieve vertical alignment.

Furthermore, enclosing the text within an additional nested div with display: table and display: table-cell enables vertical centering.

It's worth noting a missing semicolon following &nbsp;.

This method is compatible with many email clients, such as Apple Mail and Outlook.

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

What is causing these dynamic carousels to malfunction in Chrome?

After using Agile Carousel successfully for a while, I am now experiencing issues with it not working properly in Safari and Chrome, although it functions fine on Firefox and Safari for iPad. On this specific page, the carousel stops at the second image, ...

javascripthtml

Interact with users on a website by using PHP to process form data

Here is the code snippet I am struggling with: <form action="profiles.php" method="POST" name="SearchSimple" id="SearchSimple" > <input name="search" id="s" style="width: 150px;" type="text"> <a style="display: inline-block; widt ...

phphtmlforms

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

htmlcssflexbox

Select an HTML element that does not have a class or ID attribute

Is there a way to select and apply styles to a div that is nested within another div without any id or class? <div class="wrapper"> <div> </div> <div> </div> <div> </div> </div> Wh ...

htmlcss

I would like to mention a website without inserting a direct hyperlink, for example, in the Safari browser

Is there a way to prevent a website name from becoming a clickable link in Safari? In my marketing email, I am highlighting the websites of both my client and their competitor. When mentioning the competitor's site "sitename.com," I want to avoid cre ...

csssafarihtml-email

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

jqueryhtmldomrazor

Change the class of an element only within the div that is directly below it

Trying to achieve: Visit this link In my navigation menu, I have two folders with subpages under them. The CSS for displaying the page titles within the folder is as follows: .main-nav .subnav ul {display:none; transition: all 100ms ease-in-out; } .mai ...

jquerycsstogglesquarespace

What steps are necessary to alter the background color of a jumbotron?

Can someone help me figure out how to change the background-color of the 'jumbotron' class in Bootstrap? The default color set in bootstrap.css is #eee. I've tried various methods like replacing it with none, none !important, or transparent ...

htmlcsstwitter-bootstraptwitter-bootstrap-3background-color

What is the best way to retrieve all the information from a JSON file using a foreach loop in Laravel?

My Laravel Controller public function index() { $get=Storage::disk('public')>get('Philippines.json'); $json = json_decode($get, true); return view('BarangayFolder.index')>with('json& ...

htmljsonlaravel

Connected selection menu

I have noticed several discussions on this topic, but many of them rely on JavaScript or focus solely on a standard drop-down list. I have developed a PHP function that generates drop-down menus based on select queries in my database. Currently, this part ...

phphtmlforms

The output produced by ASP.NET remains unaffected by JQuery or JavaScript interference

I am facing an issue with manipulating a dynamically generated directory tree in HTML format using JavaScript. I have a piece of code that generates the tree server-side in ASP.NET and then tries to add a '+' at the end of each list item using jQ ...

c#jqueryasp.netcss

HTML email - image appears in email only on selected devices

I am experiencing an issue with my EDM. While the images look fine on my desktop and mobile devices, some of them are not showing up when I try to send the email to other phone devices (they display as "not found"). All the images are already hosted on my ...

htmloutlookhtml-emailelectronic-direct-mail

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

cssionic-frameworksass

Bootstrap 4's Img-fluid class fails to properly resize images

Having a bit of trouble with my navbar setup. I want to use an image brand with img-fluid so it resizes to fit the div and remains responsive. However, instead of resizing, the image just stretches out the navbar making it huge. Here's my code: ...

htmlcsstwitter-bootstrapbootstrap-4

Adding dropdown values to text area

I'm encountering a simple issue. My goal is to allow users to select values from a dropdown menu and have those values added to a text area. Additionally, users should be able to input extra content in the text area. Here's what I want: the user ...

javascriptjqueryhtml

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

javascriptjquerycssruby-on-railssprockets

Obtain all text within a <div> element by utilizing the agility html package

When attempting to retrieve all <p> tags from within a <div> using the Agility HTML package, I encountered an issue where only the first <p> tag was obtained. <div id='bodayDiv'> <p> hi </p> <p> what is ...

htmlhtml-agility-pack

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations

Can variables be transmitted through Real-Time Communication in JavaScript?

Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...

javascripthtmlvariablesjsfiddlechannel

I am struggling to create a responsive form using Bootstrap

I am facing an issue with my two forms that I want to have a fixed full-screen size. Despite trying different bootstrap options, they are not responsive at lower resolutions. What should I do to make them responsive? Here is the code: <form action=&a ...

htmlcsstwitter-bootstrapbootstrap-5