Comment centrer un bouton d'une image


BruceyBandit

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&amp;ixlib=rb-1.2.1" style="max-width:600px;" alt="photo-1598257006626-48b0c252070d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;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>

Lazar Nikolic

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;
    }

Articles connexes


Comment centrer une image et un bouton sur un autre bouton

Andy Je veux centrer une image et un bouton sur un autre bouton. Je ne sais pas comment faire cela. Ce serait apprécié si quelqu'un peut me montrer à travers l'interface du storyboard et non le code. Merci J'ai essayé de sélectionner les deux et de contrôler e

Comment centrer une image à l'intérieur d'un div?

Artem Z Comment centrer une image horizontalement à l'intérieur d'un div? En ce moment, l'image est à gauche, bien qu'elle doive être centrée. J'ai beaucoup essayé, y compris le positionnement, mais rien ne fonctionne. Voir le code ci-dessous. Je vous remercie

Comment dimensionner une image d'un bouton ?

mcfly doux J'ai la mise en page suivante <Button android:layout_width="fill_parent" android:layout_height="75dp" android:drawableLeft="@drawable/binocular" android:gravity="left|center

Centrer un bouton sur une image d'arrière-plan

RMV J'essaye d'afficher un "bouton de lien" au-dessus d'un div (ccontainer) avec une image d'arrière-plan. Cela fonctionne avec une position: absolue mais avec une position: relative elle disparaît. Je me demande pourquoi c'est comme je voudrais que le bouton

Comment centrer une image dans un jumbotron ?

Lucas Slemming Je suis récemment entré dans le bootstrap et j'ai des difficultés avec l'élément jumbotron. Chaque fois que j'essaie d'ajouter une image au jubotron et de la centrer ou simplement de la déplacer en général, cela ne fonctionne pas avec le css3 no

Comment centrer une image dans un cercle

Mohamed Najib J'ai besoin de l'aide de la communauté. Avant d'écrire ce post, j'ai passé du temps à chercher une réponse mais je n'ai pas pu trouver comment. Quelqu'un peut-il m'aider et me dire comment je peux centrer une image à l'intérieur du cercle, comme