Vous pouvez vérifier le résultat ici dans ce lien . En bas de page, à l'extrême droite, il y a un cercle avec une image d'un tshirt. L'image n'est pas correctement centrée verticalement.
Le css de la balise d'ancrage est le suivant: -
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
//line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
Le HTML est le suivant: -
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>
Comment puis-je le centrer? Pour le moment, j'utilise le css en ligne pour l'img, que je supprimerai plus tard dans le fichier css.
Je recommanderais de rester simple, de laisser flex le gérer pour vous. Toutes vos marges et rembourrages exacerberont les choses lorsque votre image change de taille ou d'autres situations courantes
.dfa-tshirt {
background: #2c4762;
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
width: 44px; height: 44px;
}
a img {
width: 35px; height: 35px;
} <a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>EDIT: Solution non flexible -
Je ne peux pas vraiment planifier tous les scénarios que vous pourriez avoir, mais pour répondre à votre question et prendre en charge la plupart des navigateurs, je recommanderais également de simplement déplacer le style réel sur l'image uniquement:
a img {
width: 30px; height: 30px;
padding: 5px;
border-radius: 50%;
background: #2c4762;
}<a href="https://disabilityloverstshirtbuilders.com/">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>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