html - 如何将图像放在这张 table 上并使位置响应

Question

我已经放置了图像，但是当我们调整窗口大小时它会中断。我希望它位于第一列的中心，即电子邮件服务下方的描述。我希望它一直保持在中心。我已经给出了 td 相对位置并使图像成为绝对位置。它相对于 td................................................

* {
        font-family: sans-serif;
    }
    table{
        width: 100%;
       border: 1px solid #edf2fc;
       border-collapse: collapse;
       margin-top: 30px;
     }
 
     table th {
       padding: 11px 6px 11px 6px;
       word-break: break-all;
       background: #413fa4;
       color: #fff;
       text-align: center;
     }
 
     tr td {
       border: 1px solid #cbdaf1;
     }
 
     table tbody td {
      text-align: center;
      padding: 33px 0 33px 0;
      word-break: break-all;
      font-size: 18px;
     }
 
     tfoot tr td {
       padding-top: 4px;
       padding-bottom: 4px;
     }

     tfoot tr td:first-child{
       padding-right: 22px;
     }
     .gray {
         background-color: lightgray
     }

 <table width="100%">
    <thead style="background-color: lightgray;">
      <tr>

        <th>Description</th>

        <th>Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="position: relative">Email  Service
          <img style="position: absolute; left: 300px; top: 70px;" src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>
        </td>
        <td align="center">1400.00</td>
      </tr>

    </tbody>

    <tfoot>
        <tr>
            <td align="right">Subtotal</td>
            <td align="center">1635.00</td>
        </tr>
        <tr>
            <td align="right">Tax</td>
            <td align="center">294.3</td>
        </tr>
        <tr>
            <td align="right">Discount</td>
            <td align="center">294.3</td>
        </tr>
        <tr>
            <td align="right">Total</td>
            <td align="center" class="gray">$ 1929.3</td>
        </tr>
    </tfoot>
  </table>

Answer 1

将文本和图片包裹在一个带有flex box属性的div中，然后你可以随意居中

* {
        font-family: sans-serif;
    }
    table{
        width: 100%;
       border: 1px solid #edf2fc;
       border-collapse: collapse;
       margin-top: 30px;
     }
 
     table th {
       padding: 11px 6px 11px 6px;
       word-break: break-all;
       background: #413fa4;
       color: #fff;
       text-align: center;
     }
 
     tr td {
       border: 1px solid #cbdaf1;
     }
 
     table tbody td {
      text-align: center;
      padding: 33px 0 33px 0;
      word-break: break-all;
      font-size: 18px;
     }
 
     tfoot tr td {
       padding-top: 4px;
       padding-bottom: 4px;
     }

     tfoot tr td:first-child{
       padding-right: 22px;
     }
     .gray {
         background-color: lightgray
     }
     
     .flex-b {
      display:flex;
      align-items:center;
      justify-content:center;
     }

<table width="100%">
    <thead style="background-color: lightgray;">
      <tr>

        <th>Description</th>

        <th>Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="flex-b">
               <span>Email  Service</span>
              <img src="https://image.shutterstock.com/image-vector/paid-thank-you-grunge-rubber-260nw-564254104.jpg"width=130px;>       
          </div>
        </td>
        <td align="center">1400.00</td>
      </tr>

    </tbody>

    <tfoot>
        <tr>
            <td align="right">Subtotal</td>
            <td align="center">1635.00</td>
        </tr>
        <tr>
            <td align="right">Tax</td>
            <td align="center">294.3</td>
        </tr>
        <tr>
            <td align="right">Discount</td>
            <td align="center">294.3</td>
        </tr>
        <tr>
            <td align="right">Total</td>
            <td align="center" class="gray">$ 1929.3</td>
        </tr>
    </tfoot>
  </table>