Центр двух текстовых строк справа от изображения

Question

Я пытаюсь выровнять две строки текста рядом с центром изображения. Я попытался "vertical-align: middle;" но does't сохранить свой текст в два ряда так: this is what I'm trying to achieve.

Мой код состоит из:

<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> 

С кодом CSS:

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; } 

Я также попытался это Решение: http://jsfiddle.net/hiral/bhu4p04r/7/ - но он отображает текст под изображением.

Изображение 34x58px, и я пытаюсь достичь этого для подписи Outlook html.

Я собираюсь попытаться использовать контейнер <div>, поместите в него <img>, а затем <p>, dunno, если он будет работать.

ANSWER с положительным результатом дается LGSon с незначительной модификацией, пример ниже:

<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> 

Спасибо всем за помощь!

Answer 1

Если вы не знаете, за то, который клиенты электронной почты собирается открыть свою почту, это как я это сделаю.

<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

сообщения электронной почты, как правило, лучше построены в виде таблиц, но таблицы CSS может работать:

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>