CODEWITHSUNDEEP
cssvertical-alignmentsignature
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Vertical align text with images within a table for E-mail Signature?

Im creating an E-mail signature with CSS and I'm having a problem getting the text vertical aligned next to a simple image.

Ive tried both valign and Vetical-align, yet none of both works. Who can help out?

I've made a quick roundup of whats inside my code at the moment.

http://jsfiddle.net/J5LTw/1/

or just in code:

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20"> Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20"><a href="mailto:[email protected]" style="color:black; text-decoration:none">Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20"> <a href="http://site.nl" style="color:black; text-decoration:none">Site</a></td></tr>
</table>

Thanks!

Upvotes: 2

Views: 2802

Answers (2)

GilbertOOl
GilbertOOl

Reputation: 1309

Hi test with this code :

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold; height:20px; vertical-align:middle;">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20" style="vertical-align:middle;">&nbsp;Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20" style="vertical-align:middle;"><a href="mailto:[email protected]" style="color:black; text-decoration:none; height:20px; vertical-align:middle;">&nbsp;Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20" style="vertical-align:middle;"><a href="http://site.nl" style="color:black; text-decoration:none; height:20px; vertical-align:middle;">&nbsp;Site</a></td></tr>
</table>

Upvotes: 3

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/J5LTw/2/

if you MAKE CLASS please use this css

table tr img{
    height:20px;
    vertical-align:middle;
}

if you write INLINE CSS please use

http://jsfiddle.net/J5LTw/3/

<table style="width:500px; font-family:century gothic; font-size:10">
<tr><td><p style="color: #184d95; font-weight:bold">Company</p></td></tr>
<tr><td><img src="http://i42.tinypic.com/xauvbp/5.jpg" border="0" width="20" height="20" style="vertical-align:middle;"> Phone</td></tr>
<tr><td><img src="http://i44.tinypic.com/2d2f6kx.jpg" border="0" width="20" height="20"  style="vertical-align:middle;"> <a href="mailto:[email protected]" style="color:black; text-decoration:none">Mail</a></td></tr>
<tr><td><img src="http://i41.tinypic.com/2j4ebg5.jpg" border="0" width="20" height="20"  style="vertical-align:middle;"> <a href="http://mennescreative.nl" style="color:black; text-decoration:none">Site</a></td></tr>
</table>

Upvotes: 1

Related Questions