如何在此桌子上放置图片并使位置响应

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>