I am trying to get these 4 images, with linked text underneath to display as 2x2. Everything I try ends up messing something up and sending one part AWOL. I have tried tables <td><tr>, etc.
This is what I have so far...
<br />
<div class="image" style="display:inline-block">
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
<center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
<center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
<center>text for link!!!!!</center>
</a>
<img src="image.jpg" alt="" />
<div style="display:table-caption;caption-side:bottom;">
<a href="http://www.example.com">
<center>text for link!!!!!</center>
</a>
If this is for a newsletter, you absolutely need <table>s to get this working in the popular email clients. Most email clients do not display HTML/CSS as web browsers do and <table>s get the best coverage among email clients.
Here is some basic code that displays a 2x2 grid safely in all email clients.
<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="text-align: center;">
<img src="image.jpg" alt="" />
<br />
<a href="http://www.example.com">text for link!!!!!</a>
</td>
<td style="text-align: center;">
<img src="image.jpg" alt="" />
<br />
<a href="http://www.example.com">text for link!!!!!</a>
</td>
</tr>
<tr>
<td style="text-align: center;">
<img src="image.jpg" alt="" />
<br />
<a href="http://www.example.com">text for link!!!!!</a>
</td>
<td style="text-align: center;">
<img src="image.jpg" alt="" />
<br />
<a href="http://www.example.com">text for link!!!!!</a>
</td>
</tr>
</table>