align two table rows when table is centered - html

Question

I want to align the date and Summer clearance inside of this table but I want to keep the table centered of the image horizontally. I am open for not using a table to achieve the same effect but I can;'t use Flex. It needs to be supported in most emails.
.outer {
position:relative;
background-color:red;
display:block;
width:650px;
background-image:url(https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg)
}
.inner {
position:absolute;
width:100px;
height:50px;
background-color:pink;
display:block;
bottom:-25px;
right:50%;
transform: translateX(50%);
margin:auto;
}
.hidden{
visibility:hidden;
}
#img-text{
position:absolute;
bottom:40px;
margin:auto;
width:100%;
font-family:Arial, Helvetica, sans-serif;
color:#ffffff;
text-align:center;
}
<table>
<tr>
<td>
<div class="outer">
<img class="hidden" src="https://blog.prezi.com/wp-content/uploads/2019/03/1_pzUhL5WpOeViwICDDgiLUA.jpeg">
<table id="img-text" align="center">
<tr><td>8/30-9/1</td></tr>
<tr><td>SUMMMER CLEARANCE</td></tr>
<tr><td><h3>20% OFF</h3></td></tr>
</table>
<div class="inner">Hello</div>
</div>
</td>
</tr>
</table>
This is what Ive got to work with. Ive tried using margin:auto and text-align with wrappers but can't find a way to align it left in the middle of the image.
Hope this makes sense :)

Answer 1

#img-text tr td { text-align: left ; }
you can target table data inside it and set align as you wish