CODEWITHSUNDEEP
htmlcssemailhtml-email
brando
brando

Reputation: 161

Single cell row with vertically centered image and text?

I tried searching for solutions in stack, but none of the answers I found addressed my issue.

I'm developing an email and I want to have a single cell row that has text with an image in between the text. The cell height is the full height of the image, but I want the text to be vertically centered. The text is now flush on the bottom

Here's my code (there's many inline styles, I apologize in advance). Please note this a single column row that is part of the fluid hybrid approach by Nicole Merlin. 

<tr>
      <td valign="middle" bgcolor="#e2f4ff" style="padding:0">
        <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;"> 
          <tr>
            <td valign="middle" style="vertical-align: middle !important;;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
              THE<img src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" /> OF SAFE SLEEP FOR DOGS
            </td>
          </tr>              
        </table>
      </td>
    </tr>

Upvotes: 0

Views: 75

Answers (2)

Jad
Jad

Reputation: 475

The best solution that works for all email clients is to push them to consider putting that particular image inline with the other text. That can be done by put the text and the image in many <td> of the same single row <tr>.

This will make you able to define the exact height, width and any other attributes you want of each tag.

Check the following:

<table>
  <tr>
    <td valign="middle" bgcolor="#e2f4ff" style="padding:0">
      <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
        <tr>
          <td valign="middle">
            <table border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
                  THE 
                </td>
                <td valign="middle" style="vertical-align: middle !important;padding:0;">
                  <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />
                </td>
                <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;"> OF SAFE SLEEP FOR DOGS
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115285

Just vertically align the image.

<table>
  <tr>
    <td valign="middle" bgcolor="#e2f4ff" style="padding:0">
      <table width="100%" align="center" border="1" style="border-spacing:0;font-family:sans-serif;color:#333333;">
        <tr>
          <td valign="middle" style="vertical-align: middle !important;padding:0;text-align:left;padding-bottom: 5px !important;color: #17a0ce;font-weight: bold; Margin:0;font-size:26px; text-align: center;">
            THE
            <img style="vertical-align: middle !important;" src="http://www.waldenway.com/wp-content/uploads/2015/12/largedog.png" alt="ABC's" />OF SAFE SLEEP FOR DOGS
          </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

Upvotes: 2

Related Questions