ayez juste une simple question HTML CSS. Comment placer un bouton sur l'image au centre ?
Code actuel :
.button-link{
text-decoration:none !important;
color:white;
}
.button-td{
background:#FFA06A;
text-align:center;
}
<table align="center" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow" role="presentation" style="display:table !important;" mc:edit="imagewithcta">
<tr>
<td class="button-td">
<img src="https://images.unsplash.com/photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1" style="max-width:600px;" alt="photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1"><a class="button-a sans text-white" href="*|ARCHIVE3|*">
<span class="button-link">
READ MORE
</span>
</a>
</td>
</tr>
</table>
Cela devrait faire l'affaire, en positionnant le conteneur comme relatif et l'élément comme absolu :
.button-a{
text-decoration: none !important;
color:white;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
.button-td{
background:#FFA06A;
text-align:center;
position: relative;
}
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots