html - html签名中的对齐

标签 html css email html-email

我真的希望你能提供帮助,因为我正在疯狂地尝试弄清楚如何按照我想要的方式制作这个签名。

基本上,我希望 Logo 在顶部与文本对齐, 底部图像左对齐,从 Logo 下方开始(而不是文本下方)。

注意:html 用于电子邮件,因此我不能使用css

这是我拥有(和想要)的视觉效果和代码:enter image description here

<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
    <tr>
        <td style="padding: 6px 0 0 0">
            <a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
                <img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
        </td>
        <td style="padding: 6px 0 0 0">
            <span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
            <strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
            e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
            <br>
            t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
            5 xxxxxx - 6xxxxx Bxxxx<br>
            <a href="http://twitter.com/Txxxxk">
                <img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
            <a href="http://facebook.com/Txxxxk">
                <img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
            <a href="http://linkedin.com/company/txxxxk">
                <img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
            <a href="http://www.txxxxk.fr">
                <img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
        </td>
    </tr>
</table>

最佳答案

<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
    <tr>
        <td style="padding: 6px 0 0 0">
            <a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
                <img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
        </td>
        <td style="padding: 6px 0 0 0">
            <span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
            <strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
            e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
            <br>
            t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
            5 xxxxxx - 6xxxxx Bxxxx<br>
            <a href="http://twitter.com/Txxxxk">
                <img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
            <a href="http://facebook.com/Txxxxk">
                <img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
            <a href="http://linkedin.com/company/txxxxk">
                <img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
        </td>
    </tr>
</table>
<table style="border-bottom: 1px #3d3d3d dotted; margin: 0px 0 6px; min-width: 960px;">
    <tr>
        <td align="left"><a href="http://www.txxxxk.fr">
            <img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
    </tr>
</table>

Fiddle

关于html - html签名中的对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34202767/

相关文章:

css - 在 css 变量的 rgba 上设置不透明度/alpha

html - 使用水平标签和垂直标签改进输入表单

javascript - 访问 iframe 功能

html - 如何在背景图像上添加不透明层

PHPMailer:大量电子邮件 - 一次发送所有可变消息,而不是单独发送

javascript - 在div中显示文本而不重新加载页面

angularjs - 如何在Firebase托管中使用自定义域名电子邮件

html - 更改文本区域的字体

javascript - 创建 HTML 选项卡

javascript - ul 扩展器列表未按预期运行