Menu icon Foundation
how to center an image with link

I'm trying to center a small logo image at the top of my email. 

However, if I do the following, the whole line will be clickable.

I only want the image part to be clickable. Is there anyway to solve it?

<center>
<a href="http://www.mileiq.com" target="_blank" title="MileIQ">
	
	<img src="http://emailpush.mileiq.netdna-cdn.com/relaunch2017/MileIQ-Logo.png" class="headerLogo" alt="MileIQ">
	
</a>
</center>

 

email;center;image;link;

I'm trying to center a small logo image at the top of my email. 

However, if I do the following, the whole line will be clickable.

I only want the image part to be clickable. Is there anyway to solve it?

<center>
<a href="http://www.mileiq.com" target="_blank" title="MileIQ">
	
	<img src="http://emailpush.mileiq.netdna-cdn.com/relaunch2017/MileIQ-Logo.png" class="headerLogo" alt="MileIQ">
	
</a>
</center>

 

Ryan Patterson 12 days ago

Wow, a center tag, haven't seen that in a long time. I thought that became deprecated in html4. 

If you are using foundation, just put .text-center on the parent container. That will horizontally center the image inside that parent container

So something like this:

<div class="text-center">
<a href="http://www.mileiq.com" target="_blank" title="MileIQ">
	
	<img src="http://emailpush.mileiq.netdna-cdn.com/relaunch2017/MileIQ-Logo.png" class="headerLogo" alt="MileIQ">
	
</a>
</div>

Again, this only works if using foundation. Other wise you can just apply text-align: center; to parent container.