如何在html中放置没有文本的图像

Question

我正在尝试通过修改一些现有的 html 来创建发票。我想在页面顶部放置一个图像（徽标），然后在其下方创建一个表格。我遇到的问题是，无论我做什么，表格中的文本都会出现在图像旁边。我已经找到了各种想法来将文本包裹在图像周围，但实际上没有任何想法可以不将文本包裹在图像周围。除了作为图像的标题，也不是我想要的。我的代码是：-

<style>
div.logo {float: right;}
table {width: 100%; table-layout: fixed;}
.twenty {width: 20%; }
.thirty {width: 30%; }
.fifty {width: 50%; }
</style>
<div class = "logo">
  <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all">
</div>
<table>
  <colgroup>
    <col class="fifty" />
    <col class="twenty" />
    <col class="thirty" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Invoice Date</td>
      <td>{{ shop_name }}</td>
    </tr>
    <tr>
      <td></td>
      <td>Date {{created_at | date: "%d/%m/%y" }}</td>
      <td>{{ shop.address }}</td>
    </tr>
  </tbody>
</table>

非常感谢任何帮助。

我得到了什么Link to my invoice render

Answer 1

看起来您的代码没有任何问题，表格的第一列是空的，并且您有一个 colgroup.fifty 样式的 width: 50% 。这使它看起来像桌子被推到了右边。

在此处查看带有背景颜色的钢笔以使其更清晰：https://codepen.io/lauraeddy/pen/zPYKva

Answer 2

如果你没问题，试试这个。图片将放置在 div 的中心。

<div class = "logo">
  <img align="right" src="https://cdn.shopify.com/s/files/1/1212/3100/files/logo.png?14279783622096777710" width="30%" height="30%"><br clear="all">
</div>

.logo {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}

<div class="table">
<table>
  <colgroup>
    <col class="fifty" />
    <col class="twenty" />
    <col class="thirty" />
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Invoice Date</td>
      <td>{{ shop_name }}</td>
    </tr>
    <tr>
      <td></td>
      <td>Date {{created_at | date: "%d/%m/%y" }}</td>
      <td>{{ shop.address }}</td>
    </tr>
  </tbody>
</table>
</div>

.table {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
}