Верхний колонтитул Img Left на Компьютеры и Центр на телефонах и планшетах

Question

Сегодня я добавил цветную фоновую таблицу с анимированным GIF-файлом в верхней части некоторого программного обеспечения, которое я редактирую.При правильном CSS, как я могу сделать так, чтобы изображение всегда оставалось на экранах компьютеров и центрировалось на телефонах и планшетах?Ниже, как у меня есть текущий HTML.Спасибо!: -)

<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="background-color: #663399;">
        <div><img src="Image URL" alt="Animated Gif"></div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

.img-wraper {
   text-align: left; 
}
.img-wraper img {
  display: inline-block; 
}

@media (max-width: 1024px) {
  .img-wraper {
    text-align: center;
  }
}

<table style="width: 100%;">
  <tbody>
    <tr>
      <td style="background-color: #663399;">
        <div class="img-wraper"><img src="Image URL" alt="Animated Gif"></div>
      </td>
    </tr>
  </tbody>
</table>