Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将图像右侧的两条文本行居中_Html_Css_Outlook_Electronic Signature - Fatal编程技术网

Html 将图像右侧的两条文本行居中

Html 将图像右侧的两条文本行居中,html,css,outlook,electronic-signature,Html,Css,Outlook,Electronic Signature,我试图将图像中心旁边的两行文本对齐。我尝试了“垂直对齐:中间;”,但它并没有像这样将文本分成两行: 我的代码包括: <p class="address"> <img class="logo" src="source" alt=""> <span class="location">Line 1 of text</span> <span class="location_2"> Line 2 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>
我也尝试过这个解决方案:-但它会在图像下显示文本

图像是
34x58px
,我正试图为Outlook html签名实现这一点

我将尝试使用
容器,将

正文1
正文2

谢谢大家的帮助

电子邮件通常更好地构造为表格,但CSS表格可能会起作用:

img{
最小宽度:75px;
高度:90px;
}
.栏目{
显示:表格;
}
.栏目组{
显示:表格单元格;
垂直对齐:中间对齐;
填充:1em;
}

1.

2
3
电子邮件通常更好地构造为表格,但CSS表格可能会起作用:

img{
最小宽度:75px;
高度:90px;
}
.栏目{
显示:表格;
}
.栏目组{
显示:表格单元格;
垂直对齐:中间对齐;
填充:1em;
}

1.

2
3
如果您确实不知道哪些电子邮件客户端将打开您的邮件,我会这样做


正文第1行
正文第2行

如果您确实不知道哪些电子邮件客户端将打开您的邮件,我会这样做


正文第1行
正文第2行

电子邮件通常最好以表格的形式构造。当您试图用div和其他元素构造电子邮件签名时,会遇到很多问题-表格是您的最佳选择,只需隐藏边框。您应该始终为电子邮件提供内联css。电子邮件通常更好地构造为表。在尝试使用div和其他元素构造电子邮件签名时,您会遇到很多问题-表是您的最佳选择,只需隐藏边框。您应该始终为电子邮件使用内联css。我尝试了您的答案,但它没有将两行设置在图像中心旁边。棘手的是,在网络浏览器中,当你收到电子邮件(例如Gmail)时,文本显示在图像的右上角。我尝试了你的答案,但它没有将两行设置在图像中心旁边。棘手的是,当你在网络浏览器中看起来正常时,当你收到电子邮件(例如Gmail)时,文本显示在图像的右上角。我尝试了你的答案,而在Gmail中看起来正常时,在Outlook中,两行都位于图像的右上角。我将尝试找到一个修复方法。我尝试了你们的答案,虽然在Gmail中看起来不错,但在Outlook中,两行都位于图像的右上角。我要做个实验来找到解决办法。
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; }
    <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>