J'ai un sur le bureau Il semble bon, vous pouvez voir l'icône à l'horizontalement et à la verticalement centrée:
Dans le mobile, il ressemble à l'image ci-dessous, l'icône n'est plus centrée:
Je voudrais y parvenir sans utiliser les requêtes de média. Voici mon Codepen . div qui est un carré et reste un carré quel que soit l'appareil. J'ai besoin de placer une icône fontawesome à l'intérieur de ce carré et j'ai besoin de l'icône pour rester centré sur tous les écrans. Pour une raison quelconque, je ne parviens pas à cela.
3 Réponses :
Changez simplement votre bouton .Add-img, comme si en retirant la largeur imposée, vous pouvez le centrer en haut et à droite (ou à gauche), puis utilisez Transfor Traduire pour ajuster à Le centre de l'objet.
La raison pour laquelle l'icône n'est pas centrée est dû à deux choses:
Vous essayez de redimensionner le conteneur ( police génial utilise des caractères Unicode pour afficher des icônes. Ils sont fondamentalement du texte. Pour redimensionner le graphique lui-même, vous pouvez le faire (la valeur Vous pouvez utiliser le ) du graphique vectoriel actuel au lieu du graphique réel ( :: avant intérieur ). Cela déplace le graphique à droite chaque fois que son conteneur devient plus petit. 2em est un exemple): transformer: Traduire (-50%, -50%) Option pour déplacer le point d'ancrage d'un élément à son centre, puis la positionner à l'aide de à gauche: 50% , haut: 50% < / code>.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> <div class="img-holder"> <i class="fas fa-camera add-img-button"></i> </div>