I am going insane trying to get a simple “Item
Unavailable” text overlay (centered vertically and horizontally) on-top these images:

<mj-section>
 <mj-column>
   <mj-text>
     <table width="100%" cellspacing="0" cellpadding="0" border="0" class="mobile-stack">
       <tr>
         <td width="50%" style="padding-right: 8px;" class="mobile-stack-td">
            <a href="{% url 'product' product_name=sold_item_1.product_name product_id=sold_item_1.Product_id %}">
             <img src="{{ sold_item_1.image.url }}" 
                  alt="{{ sold_item_1.release|escape }}" 
                  style="width: 100%; display: block;" />
           </a>
           <p style="text-align: center; margin-top: 16px;">
             {{ sold_item_1.release|escape }} {{ sold_item_1.format|escape }}<br/>
             {{ sold_item_1.artist|escape }}
           </p>
         </td>
         <td width="50%" style="padding-left: 8px;" class="mobile-stack-td">
           <a href="{% url 'product' product_name=sold_item_2.product_name product_id=sold_item_2.Product_id %}">
             <img src="{{ sold_item_2.image.url }}" 
                  alt="{{ sold_item_2.release|escape }}" 
                  style="width: 100%; display: block;" />
           </a>
           <p style="text-align: center; margin-top: 16px;">
             {{ sold_item_2.release|escape }} {{ sold_item_2.format|escape }}<br/>
             {{ sold_item_2.artist|escape }}
           </p>
         </td>
       </tr>
     </table>
   </mj-text>
 </mj-column>
</mj-section>

The struggle is having them render in Gmail. The “traditional” method places the text below the image. You might notice I am using mjml bc I hoped it might make this easier, but no luck so far. Ideas, suggestions, anything? This is driving me insane, so i thank you for your help 🙂