CODEWITHSUNDEEP
htmlcsshtml-email
Kanav
Kanav

Reputation: 2819

Vertical align images in td

I have a tr having 4 td. These tds are float:left. Each td has an image of different size. Now i'm trying to vertical-align the images in center, so they look in a sequence.

But when i'm adding vertical-align: middle to them, it's not working. I even added min-height to td

Here's my jsFiddle and code:

    <table class="footer deviceWidth" width="100%" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse: collapse;">
        <tr>
            <td style="font-size: 13px; color: #fff; font-weight: normal; text-align: left; line-height: 24px; vertical-align: top; padding:15px 0;">
                <h5 style="font-size: 20px;font-weight: normal;margin: 0;padding: 0;">The Company you'll Keep</h5>
                <table align="left" width="100%" class="companies" style="border-collapse: collapse;">
                    <tr style="margin-bottom: 20px;display: inline-block;margin: 10px 0 0;">
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/490x310" width="346" height="50" alt="AA" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/200x50" width="456" height="50" alt="images" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/900x100" width="391" height="50" alt="images" style="height: auto;width: 100%;"></td>
                        <td style="min-height: 50px; float: left;width: 17%;margin-right: 2.5%;"><img src="http://placehold.it/100x100" width="276" height="40" alt="images" style="height: auto;width: 100%;"></td>
                    </tr>
            </td>
        </tr>
    </table>

I'm using inline css because it's an email template.

Edit: Here's what i'm looking for: enter image description here

Upvotes: 2

Views: 5220

Answers (2)

bright
bright

Reputation: 4811

Here's some code that does what you want without using tables. I've corrected the placeholder image widths as well. The width of the inline-block should be the sum of the widths of the images plus a bit extra to account for default margins, borders and padding (unless you explicitly zero them out).

<div style="display:inline-block;width:1800px;">
<img src="http://placehold.it/490x310" width="490" height="310" alt="AA" style="vertical-align:middle;"/>
<img src="http://placehold.it/200x50" width="200" height="50" alt="images" style="vertical-align:middle;"/>
<img src="http://placehold.it/900x100" width="900" height="100" alt="images" style="vertical-align:middle;"/>
<img src="http://placehold.it/100x100" width="100" height="100" alt="images" style="vertical-align:middle;"/>
</div>

If you really want to use tables, remove the float:left from each of the td's and add vertical-align:middle;.

Upvotes: 2

AlphaG33k
AlphaG33k

Reputation: 1678

You only need one thing to pull this off vertical-align:middle; to the element you want to have aligned in the middle. Wish they were all this easy huh?

http://codepen.io/nicholasabrams/pen/wamepG

Upvotes: 1

Related Questions