如何使用HTML中的徽标修复文本对齐方式

Question

我正在尝试确保此html中的所有填充对齐以及文本和徽标对齐。

下面列出了我用于使所有内容对齐的代码。

<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
  <tbody>
    <tr>
      <td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
        <div class="ee_editable" style="position: static;">
          <div class="" style="padding-top: 10px;"><br></div>
          <div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
          <div> </div>
      </td>
      <td width="180">
        <a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
          <img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
        </a>
      </td>

    </tr>


    <tr>
      <td class="ee_dropzone" width="580" align="left" style="width: 580px;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
          <tbody>
            <tr>
              <td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
            </tr>
          </tbody>
        </table>

上面的代码包装在这样的代码中：

<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
  <tbody>
    <tr>
      <td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
        <table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">

现在，页面显示为：

但是我需要白色的迷你图片，文本和徽标与页面的其余部分对齐。感谢您的输入！

Answer 1

您需要将td和图像跨越两列，因为上面的行是两个td，如果这是有道理的。

所以，如果您更改

<td class="ee_dropzone" width="580" align="left" style="width: 580px;">

到

<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">

你应该很好。