居中图像右侧的两行文本答案

【问题标题】：Center two text lines right of image居中图像右侧的两行文本
【发布时间】：2016-04-12 14:25:46
【问题描述】：

我正在尝试对齐图像中心旁边的两个文本行。我尝试了"vertical-align: middle;"，但它并没有像这样将我的文本保持在两行中： 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> 放入其中，不知道是否可行。

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>

谢谢大家的帮助！

【问题讨论】：

电子邮件通常最好构造成表格。
在尝试使用 div 和其他元素构建电子邮件签名时，您会遇到很多问题 - 表格是您最好的选择，只需隐藏边框即可。
您应该始终使用内联 CSS 来处理电子邮件。

标签： html css outlook electronic-signature

【解决方案1】：

电子邮件通常以表格形式更好地构建，但 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>

【讨论】：

我试过你的答案，但它没有将两行设置在图像中心旁边。棘手的部分是，虽然在网络浏览器中看起来不错，但当您收到电子邮件（例如 Gmail）时，文本显示在图像的右上角。

【解决方案2】：

如果您不知道哪些电子邮件客户端会打开您的邮件，我会这样做。

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

【讨论】：

我尝试了您的答案，虽然在 Gmail 中看起来不错，但在 Outlook 中，两行都位于图像的右上角。我将尝试寻找解决方法。