如何在HTML发票模板中正确定位QR码图片

问题根源 #

1. 未闭合的HTML标签：客户信息和发票信息表格中存在多处未正确闭合的<tr>标签，导致浏览器渲染布局混乱。
2. 未应用定义好的CSS类：你已经在CSS中定义了.qr-code类，但HTML里的QR码图片未添加该类，无法触发居中、清除浮动的样式。
3. 浮动元素清除后的布局对齐：虽然添加了clear:both的<br>，但未确保QR码在清除浮动后能精准对齐到发票信息表格下方。

修复步骤 #

1. 修正HTML表格结构：闭合所有未结束的<tr>标签，确保表格层级正确。
2. 为QR码添加CSS类：给QR码图片加上class="qr-code"，利用已定义的样式实现居中定位。
3. 优化浮动后的布局：将两个浮动表格包裹在一个容器中，确保清除浮动后，QR码能紧跟在该容器下方。

修改后的完整代码 #

CSS代码

table {
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 10px auto;
  font-size: 14px;
  color: #1e2b40;
}

td,
th {
  border: 1px solid gray;
  padding: 6px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.contact-info {
  font-family: Arial, sans-serif;
  font-size: 12px;
  float: right;
  margin: 1px auto;
  font-weight: normal;
}

.contact-info ul {
  list-style-type: none;
}

.qr-code {
  clear: both;
  display: block;
  width: 300px;
  height: 300px;
  margin: 20px auto;
}

.srs-logo {
  width: 300px;
  height: 150px;
  margin: 10px auto;
  display: block;
}

.items-table {
  float: left;
  padding: 6px;
  margin: 10px auto;
  border-collapse: collapse;
  width: 100%;
}

.items-table th,
.items-table td {
  border: 1px solid gray;
  padding: 6px;
}

HTML代码

<header>
  <img src="https://drive.google.com/file/d/1mwNaPe8w4Bxn7mkXivmI2dqcwBg4_aog" alt="srs-logo" class="srs-logo" />

  <div class="contact-info">
    <ul>
      <li>SARL RO SOLUTION</li>
      <li>RC: RC:</li>
      <li>NIF: NIF</li>
      <li>AI: AI</li>
      <li>Phone: Phone:</li>
      <li>Email: info@company.com</li>
    </ul>
  </div>
</header>

<hr style="margin-top: 100px;">

<div class="info-container">
  <table style="float: left;">
    <tr>
      <td colspan="2" class="center bold">Customer Information</td>
    </tr>
    <tr>
      <td>Customer Name:</td>
      <td>&lt;&lt;[Customer Name]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Customer Address:</td>
      <td>&lt;&lt;[Customer Address]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Customer NIF:</td>
      <td>&lt;&lt;[Customer NIF]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Customer RC:</td>
      <td>&lt;&lt;[Customer RC]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Customer AI:</td>
      <td>&lt;&lt;[Customer AI]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Telephone:</td>
      <td>&lt;&lt;[Company AI]&gt;&gt;</td>
    </tr>
  </table>

  <table style="float: right; margin: 0 auto">
    <tr>
      <td colspan="2" class="center bold">Invoice Information</td>
    </tr>
    <tr>
      <td>Invoice Date:</td>
      <td>&lt;&lt;[Invoice Date]&gt;&gt;</td>
    </tr>
    <tr>
      <td>Invoice ID:</td>
      <td>&lt;&lt;[Invoice ID]&gt;&gt;</td>
    </tr>
  </table>
</div>

<br style="clear: both;">

<img src="&lt;&lt;[Invoice Date]&gt;&gt;" alt="qr-code" class="qr-code">

<hr>

<table style="float: left;">
  <tr>
    <td rowspan="1" class="center bold">Related Sales</td>
    <td colspan="" class="center bold">Invoice Information</td>
  </tr>
</table>

<br style="clear: both;">

<hr>

<table class="items-table">
  <thead>
    <tr>
      <th>Item description</th>
      <th>Quantity</th>
      <th>Unit Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <p class="startifend">&lt;&lt;Start:[invoice_key].[Related invoice_items]&gt;&gt;</p>
    <tr>
      <td>&lt;&lt;[description]&gt;&gt;</td>
      <td>&lt;&lt;[quantity]&gt;&gt;</td>
      <td>&lt;&lt;[unit_price]&gt;&gt;</td>
      <td>&lt;&lt;[total_price]&gt;&gt;</td>
    </tr>
    <p class="startifend">&lt;&lt;End&gt;&gt;</p>
  </tbody>
</table>
<br style="clear: both;">
<hr>

关键优化点 #

• 修正了CSS中.srs.logo的选择器错误，改为.srs-logo并添加display:block确保logo居中。
• 闭合了所有未结束的<tr>标签，解决布局渲染异常。
• 给QR码图片添加.qr-code类，利用clear:both和margin:0 auto实现精准居中且紧跟在浮动表格下方。
• 用容器包裹两个浮动表格，让布局结构更清晰，便于后续维护。

内容的提问来源于stack exchange，提问作者Atlas