Question

I am designing an html email. I have an image and 1 paragraph at the top and bottom. These 3 are within a table cell. I need the image to be at the center of the cell and the 2 paragraphs should be vertically equidistant from the image.

<td height="200" style="vertical-align:middle;">
  <p style="vertical-align:middle;">Lorem Ipsum</p>
  <img src="pic.jpg" height="150" />
  <p style="vertical-align:middle;">Lorem Ipsum</p>
</td>

Right now the 3 are not aligned vertically. How do I get them to align with equal space between each other vertically?

Answer 1

This way it works fine:

<style>
    td {
        vertical-align:middle;
    }
</style>

And the HTML:

<table>
    <tr>
        <td>
            <p>Lorem Ipsum</p>
        </td>
        <td>
            <img src="http://lorempixel.com/output/food-h-c-100-200-8.jpg" alt="">
        </td>
        <td>
            <p>Lorem Ipsum</p>
        </td>
    </tr>
</table>