I used <div style="width: 742px; margin: 0px auto; ">
to center the container div
.
In the browser it works, but when I open it in Microsoft Outlook it's not in the center.
I also used !important
on the margin
because I thought it took precedence over the CSS.
How do I center a div
in the browser and email?
Desktop versions of Outlook don't support the styling of <div> tags.
You can do this by setting the display property to “flex.” Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
<div align="center"> your code </div>
Only for Outlook
For emailing in general it is better to do use html attributes and deprecated tags instead of their CSS equivalents because some messaging systems ignore inline styles.
For example, instead of:
<div style="width: 742px; margin: 0px auto; ">...
You can use:
<body align="center"><table align="center" width="742">...
Or
<div align="center">...
Example 2, instead of:
<p style="font-family: Arial, Helvetica, Tahoma, sans-serif;">My text</p>
You can do:
<font face="Arial" size="4">My text</font>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With