html email text center vertically in div

Question

i am trying to center the text in a div in an html email. In Browserview everything is ok with line-height. But in apple mail and in outlook it isn't vertically centered.

 <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 tried with the table snippet...don't get it.

How can i achieve this? Thanks!

Answer 1

Instead of div use table component and it will work across the browser.

Answer 2

To vertically center the text in the div, you can use the "display: table" and "display: table-cell" CSS properties.

By adding display: table-cell to the inner div, it becomes a table cell, and you can then use the vertical-align: middle property to center its contents vertically.

Additionally, you need to wrap the text inside another nested div with display: table and display: table-cell to vertically center it.

Also, I noticed that you have a missing semicolon after the  .

This should work in most email clients, including Apple Mail and Outlook.