CODEWITHSUNDEEP
html
jsloan
jsloan

Reputation: 1

Aligning 3 images in HTML Email

enter image description hereWhen I align 3 images in HTML email, it works in some email clients, but not in others. Any ideas what I did wrong? Want the 3 images evenly spaced across the email, centered. Here is the code I am using:

<div>
<img align="left" src="img link" style="float: left; width: 28%; margin-right: 8%; margin-bottom: .5em;" width="28">
<img src="img link" style="float: middle; width: 28%; margin-right: 5%; margin-bottom: .5em;" width="28">
<img align="right" src="img link" style="float: right; width: 28%; margin-right: 0%; margin-bottom: .5em;" width="28">
</div>

This image is how it looks in Outlook 2013 for PC. on mac they were centered and aligned version on PC,

Upvotes: 0

Views: 1424

Answers (3)

Carr
Carr

Reputation: 2791

On my own opinion ,you can play with property ' flex '

Instead of adjusting the width of image , maybe it is better to adjust image's margin in your case , and it can keep image be centered on its block , here is a demo http://codepen.io/Carr1005/pen/jApyZz 

<div style='display : flex;'>
   <img src="img_link" style="flex : 1;margin : 0 5%">
   <img src="img_link" style="flex : 1; margin : 0 5%">
   <img src="img_link" style="flex : 1; margin : 0 5%">
</div>

Upvotes: 0

user1817927
user1817927

Reputation:

simple solution 

put in div width=100%

and in each image 

width = 28%  max-width = XXXpx display=inline-block

Respect your code: for your code width=28% and width=28 is wrong idea use only one, when you use (margin-right: 5%; margin-bottom: .5em;") this introduce diferent widths in diferents resolutions, use pixels in all or "em" in all.

Upvotes: 0

Adam Trager
Adam Trager

Reputation: 36

Try using a table. Email clients are notoriously difficult to style for and have widely different implementations, but most end up being very similar in terms of layout if everything's in a table.

Pretty simple markup:

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 33%;">

etc..

Upvotes: 2

Related Questions