Top Header Img Left on Computers & Center on phones & Tablets

Question

Today I added a colored background table with a animated gif in the table to the top of some software that I'm editing. With proper css, how can I get the image to always be Left on computer screens, and Centered on phones & tablets? Below is how I have the current HTML. Thanks! :--)

 <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>