Mitte zwei Textzeilen rechts von Bild

Question

Ich versuche, zwei Textzeilen neben der Mitte des Bildes auszurichten. Ich habe versucht, aber es "vertical-align: middle;" does't meinen Text in zwei Reihen halten etwa so: this is what I'm trying to achieve.

Mein Code besteht aus:

<p class="address">   
    <img class="logo" src="source" alt=""> 
    <span class="location">Line 1 of text</span> 
    <span class="location_2"> Line 2 of text</span> 
</p> 

Mit CSS-Code:

p.address{font-family: Helvetica; font-size: 13px; color: #000000; margin-left: 0px;vertical-align:center;} 
span.location{display: inline; } 
span.location_2{display: block; } 

Ich habe auch versucht, diese Lösung: http://jsfiddle.net/hiral/bhu4p04r/7/ - aber es zeigt den Text unter dem Bild.

Das Bild ist 34x58px und ich versuche, dies für eine Outlook-HTML-Signatur zu erreichen.

Ich werde versuchen, mit einem <div> Container, setzen Sie die drin, dann die <p>, weiß nicht, ob es funktionieren wird.

ANTWORT mit positivem Ergebnis durch LGSon mit geringen Modifikationen gegeben, zB unter:

<table style="margin-bottom:5px; font-family: Helvetica; font-size: 13px; color: #000000;"> 
    <tr> 
    <td> 
     <img style="max-height:52px" src="img_source_here" alt=""> 
    </td> 
    <td valign="middle" style="font-size:14px; margin-left: 10px;"> 
     Text 1<br>Text 2 
    </td> 
    </tr> 
</table> 

Vielen Dank für die Hilfe!

Answer 1

Wenn Sie für eine Tatsache nicht wissen, welche E-Mail-Clients Ihre E-Mail öffnen, wird dieses So würde ich es machen.

<table style="font-family: Helvetica; font-size: 13px; color: #000000; "> 
 
    <tr> 
 
    <td rowspan="2"> 
 
     <img style="border: 3px solid #000" src="http://placehold.it/100" alt=""> 
 
    </td> 
 
    <td valign="bottom"> 
 
     Line 1 of text 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="top"> 
 
     Line 2 of text 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

E-Mails werden in der Regel besser als Tabellen aufgebaut, aber CSS Tabellen funktionieren könnte:

img { 
 
    min-width: 75px; 
 
    height: 90px; 
 
} 
 
.columns { 
 
    display: table; 
 
} 
 
.columns div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 1em; 
 
}

<div class="medium-12 columns"> 
 
    <div class="imgwrap"> 
 
    <img src="http://placekitten.com/g/75/90" class="left" /> 
 
    </div> 
 
    <div class="text">1 
 
    <br />2 
 
    <br />3</div> 
 
</div>