CODEWITHSUNDEEP
htmloutlookhtml-tableinlinecentering
Barton Lewis
Barton Lewis

Reputation: 157

horizontally centering td in html email using inline stlyes

I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!

<!DOCTYPE html>
<html>
<head>
    <title>email blast re films</title>
    </head>
    <body>
        <table>
    <tr>
        <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
            <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a>
        </td>
    </tr>
    </table>
    <table>
    <tr>
        <td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
            <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a>
        </td>
    </tr>
    </table>
<table>
    <tr>
        <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
            <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background:  #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415
        </td>
    </tr>
    </table>
    </body>
</html>

Upvotes: 0

Views: 2632

Answers (5)

magic_turtle
magic_turtle

Reputation: 1333

First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag - 

<table cellpadding="10">

The cell content is centered by default - 

<table cellpadding="10">
   <tr>
      <td style="background-color: red;">
          <a href="address">Link 1</a><br/>
          <a href="address">Link 2</a>
      </td>
   </tr>
   <tr>
      <td style="background-color: red;">
          <a href="address">Link 1</a><br/>
          <a href="address">Link 2</a>
      </td>
   </tr>
</table>

UPD

To center the whole table, set margin to 0 auto - 

<table style="margin: 0 auto;">

To center only either a row or a column, apply accordingly - 

<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or 
<td style="width: 50%; margin: 0 auto; display: table;"></td>

Upvotes: 1

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Check out this html. Appears fine to me.

<!DOCTYPE html>
<html>
<head>
    <title>email blast re films</title>
    </head>
    <body style="height:height:500px;">
        <table border="0" style="width:100%; text-align:center;">
    <tr>
        <td >
            <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; " title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a></span>
            <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span>

            <span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"><a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html" style="padding-right:10px;padding-left:10px; background: #3D87F5; text-decoration: none; color: white; border-radius: 5px;" title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a></span>
            <span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;">&nbsp;</span>
        </td>
    </tr>

    <tr>
        <td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
            <a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background:  #3A8E47; 
    text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home &#40;718&#41; 399-8344 | cell &#40;347&#41; 325-4415
        </td>
    </tr>
    </table>
    </body>
</html>

Upvotes: 0

bdalina
bdalina

Reputation: 523

Use text-align:center, vertical-align:middle, 

table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
        <html>
        <head>
            <title>email blast re films</title>
            </head>
            <body>
            <div id="centerme">
                <table>
            <tr>
                <td>
                    <a href="http://bartonlewisfilm.com/artwork/4258558-wall-cuts-train-stations-New-York-City-excerpt.html" title="watch wall cuts, train stations, New York City" target="_blank;">Watch my film "wall cuts, train stations, New York City"</a>
                <br/>
                    <a href="http://http://bartonlewisfilm.com/artwork/4264539-red-hook-rush-hour-excerpt.html"  title="watch red hook, rush hour" target="_blank;">Watch my film "red hook, rush hour"</a>
                </td>
            </tr>
            </table>
            </div>
            </body>
        </html>

Upvotes: 0

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Adding margin to body tag, will that work for you.

 <body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">

Upvotes: 0

teej2542
teej2542

Reputation: 608

You add an align attribute to the td cell.

<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> <a href="www.somesite.com">Your link </a>
    </td>

Upvotes: 0

Related Questions