【问题标题】:How do I center an image in a table in Outlook如何在 Outlook 中的表格中将图像居中
【发布时间】:2018-02-16 17:36:56
【问题描述】:

在 Outlook 中移动文本或图像中心的正确内联 CSS 是什么。每当我在浏览器中打开它时,它看起来很棒,但底部的图像和文本总是留在 Outlook 中。不知道还有什么可以尝试的。任何帮助表示赞赏

 <table cellpadding="0" cellspacing="0" border="0" width="800" align="left">
     <table align="left" width="800px;">
         <tr width="800px">
             <td><img width="800px;" src="images/ArlingtonPic-edited.png"></td>
         </tr>  
     </table>

     <table align="left" width="800px;">
        <tr width="800px">
           <td width="800px" style="font-size:20px; margin-left: auto; 
               margin-right: auto; text-align: center; vertical-align: middle;">
               <strong>Arlington Concrete Floor Boxes</strong></td>
        </tr>
     </table>

     <table align="left" width="800px;">
        <tr width="800px">
           <td width="350px" style="font-size:16px; padding: -10px 10px 0 10px;">
              <p>Our NEW heavy-duty<strong>FLBC4502</strong>  4.5"<strong> concrete floor
                 box</strong> has more! <strong> <span style="color: red">SIX conduit hubs and FOUR plugs.</span></strong>
                 And the NEW FLBC4502LR leveling ring makes
                 installation easier than ever on our FLBC4500
                 and FLBC4502, and others concrete boxes. <br>
                 It is <em>REVERSIBLE!</em></p>
                 </ul>
           </td>

           <td width="350px" style="font-size:16px; padding: 0 10px;">
               <p>The screw holes on SIDE A fit all 4.5" boxes,
                  and accommodate our 6" round covers,
                  and most others on the market.
                  SIDE B features a second set of holes
                  that fit a cover with a 3-3/8" hole pattern.
                  These Arlington <strong>cover kits</strong> fit 
                  our concrete boxes. <br>
                  <em>That is convenience!</em></p>
           </td>
        </tr>
     </table>

     <table align="left"  width="800px;">                        
        <tr width="800px">
           <td width="800px" style="margin-left: auto; margin-
               right: auto; text-align: center; vertical-align: middle;">
               <img src="images/ArlingtonLogo.png">
           </td>
        </tr>
     </table>

【问题讨论】:

标签: html css outlook


【解决方案1】:

在您的表格单元格上使用以下属性:

<td valign="middle" align="center">...</td>

用于垂直和水平对齐。

这个short article 可以帮助你。

【讨论】:

  • HTML 电子邮件是必需的,相信我。
  • 您的 HTML 电子邮件在电子邮件客户端中看起来都不好看。与 2010 年、2013 年相比,办公室中的人们仍然使用 Office/Outlook 2007...
  • @Rob 你建议在表格内垂直对齐什么?
【解决方案2】:

这将在 Outlook 的中心添加图像。

<table width="100%">
<tr>
<td align="center">
<img src="https://4de5ad3168da.png" align="middle" width="200" height="130">
</td>
</tr>
</table>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-11-29
    • 1970-01-01
    • 2011-06-02
    • 2014-04-09
    • 1970-01-01
    • 2017-11-26
    • 2017-08-02
    相关资源
    最近更新 更多