CODEWITHSUNDEEP
htmlcss
Johan Herstad
Johan Herstad

Reputation: 692

How to center elements in emailtemplates correctly?

Why does the last element(picture) show correctly in outlook but not in gmail? I want it to be centered. Why do emailclients display html differently and how can i adjust for this?

<div style='margin: 20px; width: 80% padding: 10px;'>
 <div style='text-align:center'>
   <h1>Welcome, customer</h1>
 </div>
 <p>Thank you for subscribing to my mailing list. bla bla bla...</p> 
 <div style='text-align: center'>
   <h2><a href='http://something.com'>Link to something</a></h2>
   <p>Please click the link</p>
 </div>
   <br /><br />
 <div style='text-align:center;'>
   <img src='https://www.nnlskyen.no/images/nnlnew.jpg' alt='img' width='170' height:'75' border='0' style='display: block; width: 170px; align: center;' />
   <br />
 </div>
</div>

Upvotes: 1

Views: 48

Answers (3)

Umar Abdullah
Umar Abdullah

Reputation: 1290

Use inline-block. height and width with %.

<div style='text-align:center;'>
   <img src='https://www.nnlskyen.no/images/nnlnew.jpg' alt='img' height:'50%' border='0' style='display: inline-block; width:'50%' ; align: center;' />
   <br />
 </div>

Upvotes: 0

Ranjith v
Ranjith v

Reputation: 1062

try this

HTML

    <div style='margin: 20px; width: 80%; padding: 10px;text-align:center;'>
 <div style='text-align:center'>
   <h1>Welcome, customer</h1>
 </div>
 <p>Thank you for subscribing to my mailing list. bla bla bla...</p> 
 <div>
   <h2><a href='http://something.com'>Link to something</a></h2>
   <p>Please click the link</p>
 </div>
   <br /><br />
 <div>
   <img src='https://www.nnlskyen.no/images/nnlnew.jpg' alt='img' width='170' height:'75' border='0' style='width: 170px; align: center;' />
   <br />
 </div>
</div>

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Change display: block to inline-block

<div style='text-align:center;'>
   <img src='https://www.nnlskyen.no/images/nnlnew.jpg' alt='img' width='170' height:'75' border='0' style='display: inline-block; width: 170px; align: center;' />
   <br />
 </div>

Upvotes: 1

Related Questions