I am working on Newsletter HTML and I can't give margin to center align the divs. How can I align the button into the center of the div. Here is the simple code
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<div style="text-align:center;">
<a href="#" style="display:block; width:150px; text-decoration:none; font-weight:bold; color:#fff; background:#c72622; font-size:20px; border-radius:7px; -webkit-border-radius:7px; padding-top:10px; padding-bottom:10px;">
Buy Now
</a>
</div>
</td>
</tr>
</table>
Add align="center" to your containing table cell. This is the best way to center align in HTML email.
steer clear of all padding and margin, they are poorly / wrongly supported in a lot of clients. use lots of nested tables and <tr> <td height="1234" align="center/left/right"> instead. Avoid the <table align="center/left/right"> attribute wherever you can because outlook will generate extra whitespace. I use <table align="center"> for my wrapper tables.
For vertical alignment, use the valign attribute of your <td>s and <tr>s. Works best if another td in the row has an image with the height you'd like to vertical align to.
Related
I have this html in my email:
<li><h4>Sample Text 31 <small><img src="<link to image>"></small></h4></li>
The image is misaligned and the height width of the img tag is way bigger than the text size. See below
How can I keep the image to appear next to text and be of the same size?
To support most email clients, I would put this content in an actual table and you can use the valign attribute if you need to. valign doesn't seem necessary in chrome here, but it might be for outlook. You would add valign="middle" to the td's. You might also be able to put the text and image together in a single td and use valign="middle".
You should be able to nest a table in the li, or just use a table there instead.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:40px;font-weight:bold;">Sample Text 31</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" width="20" height="20"></td>
</tr>
</table>
You can display the li tag as a table and its children as cells. then vertical align the contents in the middle
snippet below
li {
display:table;
vertical-align:middle;
}
li *{
display:table-cell;
border:solid red;
vertical-align:middle;
}
<li><h4>Sample Text 31 </h4><small><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmbMn9M5hlfXUXtw0a_ZsH3aS0HWvXT0eZiDeFauNmJOInHgm"></small></li>
I've got table elements within a table. The parent table has a width of 100% and the child table has a width of 300px. I want the child to be centered, so I tried with css to set it with text-align: center;. (https://jsfiddle.net/wrzo7LLb/1/)
<table class="body">
<tr>
<td class="align center"> <!-- CSS text-align: center; -->
<table class="wrapper">
<tr>
<td>
some text
</td>
</tr>
</table>
</td>
</tr>
</table>
But that doesn't work. And then I tried it with align="center" and that did work. (https://jsfiddle.net/wrzo7LLb/)
<table class="body">
<tr>
<td align="center"> <!-- align="center" -->
<table class="wrapper">
<tr>
<td>
some text
</td>
</tr>
</table>
</td>
</tr>
</table>
Could someone explain to me why align="center" works, but text-align: center; doesn't?
I know I can set margin: 0 auto;, but that doesn't explain why align="center" works and the other doesn't.
Semantically (and technically) speaking, text-align should only be used to align inline level elements, of which a table is not.
The align property on a table doesn't refer to text but to
align
This enumerated attribute indicates how the table must be aligned inside the containing document.
As per the table docs above, align has been deprecated, and it is suggested that you do indeed use margin:0 auto; to "center" a table element
Usage Note
Do not use this attribute, as it has been deprecated. The <table> element should be styled using CSS. Set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute.
text-align:center only works for inline elements and obviously table is a table element.
set and try again
table table {
display:inline;
}
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
using Mailchimp, I am trying to add a header to my template + a small icon. The layout should be like this:
HEADER TEXT HERE - small icon here
The small icon should be horizontally aligned with the header text. If i just drag and drop the image in, that doesn't work at it makes the image bottom aligned.
I tried adding the section as a block of code, like this:
<div class="mcnTextContent">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="color:#606060; font-size:15px; line-height:100%; padding-top:10px; padding-right;0px; padding-bottom:0px; padding-left:17px;"><strong>MY HEADER HERE</strong></td>
<td style="padding-top:0px; padding-right:0px; padding-bottom:0px;">
<img src="myimagehere.jpg" class="captionImage mcnImage" style="display:block; max-width:30px;"/>
</td>
</tr>
</table>
</div>
In mailchimp, it looks correct.
However, in gmail the alignment of the text is wrong (padding seems to be ignorned).
In outlook, the padding is OK, but the image size formating is ignored, as is the text style.
Any ideas on how to fix or workaround this?
Thanks.
You might consider making the "header" you want into an image (e.g. using PhotoShop) to exactly control what you want!
Here is what I have, the only CSS is styling for my tags, so there is no relevant CSS effecting this.
<tr>
<td colspan="2" valign="top"><span style="font-size:20px; color:#ed8f49">Fall Classes with</span><img src="REDACTED.png" height="90" width="482"></td>
</tr>
When I have only the TD things work fine, but as soon as I put that text in a span or try to make it h1 it aligns to the bottom, even if I add alignment attributes to the span as well.
Try:
<td colspan="2" style="vertical-align: top;">
The attribute valign is deprecated and should not be used.
You need align="top" or style="vertical-align:top on your image :)