Is the use of tables for layouts recommended?
Before proceeding, it's important to confirm whether a table is being used for layout purposes in this case.
If so, it's not advisable.
1. Sizing Recommendations
It is suggested to set the size of the anchor element rather than the cell as shown in the snippet below.
2. Achieving Vertical Centering
In the past, achieving vertical centering involved using a specific hack. However, now you can utilize the calc feature which offers better support:
top: calc(50% - 35px);
3. Utilize the :after Pseudo Element
An alternative method involves utilizing the pseudo-element :after without nesting an image within each anchor tag.
a:after {
background-image: url("https://i.stack.imgur.com/5b8Bn.png");
/* Additional styles required, refer to the snippet */
}
Experiment with the following snippet...
a {
display: block;
width: 244px;
height: 186px;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg/1024px-Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg") no-repeat center;
background-size: 100%;
text-align: center;
}
a:after {
display: block;
width: 70px;
height: 70px;
position: relative;
top: calc(50% - 35px);
left: calc(50% - 35px);
content: " ";
background-image: url("https://i.stack.imgur.com/5b8Bn.png");
}
<table>
<tbody>
<tr>
<td>
<a href="#">
</a>
</td>
</tr>
</tbody>
</table>
Enhanced Approach: Consider implementing the :after technique along with using an actual <img> for your background for improved results:
a {
display: inline-block;
position: relative;
}
img {
display: block;
width: 244px;
height: 186px;
}
a:after {
display: block;
width: 70px;
height: 70px;
content: " ";
position: absolute;
top: calc(50% - 35px);
left: calc(50% - 35px);
background-image: url("https://i.stack.imgur.com/5b8Bn.png");
}
<a>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg/1024px-Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg" />
</a>