Center two text lines right of image

Question

I'm trying to align two text rows next to the center of the image. I tried "vertical-align: middle;" but it does't keep my text in two rows like so: this is what I'm trying to achieve.

My code consists of:

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

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

I also tried this solution: http://jsfiddle.net/hiral/bhu4p04r/7/ - but it show the text under the image.

The image is 34x58px and I'm trying to achieve this for an Outlook html signature.

I'm going to try using a <div> container, put the <img> in it, then the <p>, dunno if it will work.

ANSWER with positive result given by LGSon with minor modification, example below:

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

Thank you all for the help!

You will run into lots of issues when trying to construct an email signature with divs and other elements - tables are your best bet, just hide the border. — Gavin Thomas, Apr 12 '16 at 14:28

score 5 · Answer 1 · answered Apr 12 '16 at 14:31

5

Emails are usually better constructed as tables but CSS tables might work:

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>

answered Apr 12 '16 at 14:31

Paulie_D

107,962
13
142
161

I tried your answer but it didn't set the two rows next to the center of the image. The tricky part is that while in the web browser it looks ok, when you're receiving the email (ex. Gmail) the text appears top-right of image. – Azdamus Apr 13 '16 at 07:29

score 0 · Accepted Answer · answered Apr 12 '16 at 16:55

0

If you don't know for a fact which email clients is going to open your mail, this is how I would do it.

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

answered Apr 12 '16 at 16:55

Asons

84,923
12
110
165

I tried your answer and while in Gmail looks OK, in Outlook both rows are positioned top-right of image. I'm going to experiment to find a fix. – Azdamus Apr 13 '16 at 08:59

Center two text lines right of image

2 Answers2