4
votes

aligner verticalement les emoji dans div sur Mac

Est-il possible d'aligner parfaitement et verticalement les emojis dans un div sur Mac?

Comme vous pouvez le voir sur la capture d'écran, le div mesure 50px et l'emoji mesure 50px, mais la tête dépasse au-dessus du div plutôt que d'être parfaitement et verticalement centrée à l'intérieur.

Voici le fiddle .

Comme vous pouvez le voir, mon div est simple et ne contient que le code de l'emoji:

div {
  width: 50px;
  height: 50px;
  background-color: #f00;
  font-size: 50px;
  line-height: 50px;
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  vertical-align: center;
}

J'ai essayé d'ajouter un tas de styles de centrage vertical au div en vain:

<div>&#x1F464;</div>

Curieusement, le code ci-dessus fonctionne parfaitement sous Windows car leur emoji s'aligne sur la ligne de base de la police.


2 commentaires

Avez-vous essayé de réduire la taille de la police ?


Oui, réduire ou augmenter la font-size ne supprime pas l'imperfection, bien que la diminution de la font-size rende l'imperfection plus difficile à voir.


4 Réponses :


0
votes

Placez le texte dans un span afin de pouvoir le cibler séparément du div . Ensuite, supprimez le centrage de la flexbox et vous pouvez l'inclure avec d'autres styles que vous pouvez voir ici.

<div>
  <span>&#x1F464;</span>
</div>
div {
  width: 50px;
  height: 50px;
  background-color: #f00;
}
div span {
  display: inline-block;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  padding-top: 7px;
}


3 commentaires

L'icône n'est pas alignée avec le bas de la div parent dans Firefox.


Votre approche de l'utilisation de l'icône est celle où vous pouvez vous attendre à ces différences entre les navigateurs car vous traitez avec un flux de texte au lieu d'un élément DOM clairement défini. C'est pourquoi de nombreuses personnes choisissent d'utiliser des polices d'icônes réelles telles que Font Awesome ou du code SVG pour définir la forme dans le navigateur d'une manière plus prévisible entre les navigateurs.


Cela a l'air plutôt bien, mais sur Windows, cela ajoutera un rembourrage supplémentaire. De plus, nous essayons d'éviter d'utiliser une police d'icônes propriétaire.



0
votes

Voici comment je l'aborderais. La taille de la police sur mac semble créer une image supérieure à 50x50, ce qui peut être à l'origine du problème. Cacher le débordement rendra au moins l'image plus cohérente.

<div class="container">
  <div class="emoji">
      &#x1F464;
  </div>
</div>

.container {
  width: 50px;
  height: 50px;
  background-color: #f00;
  overflow: hidden;
}
.emoji {
    font-size: 50px;
    width: 50px;
    height: 50px;
}

https://jsfiddle.net/pg46v8j3/2/ a>


1 commentaires

Ah je vois, les emojis seront de tailles différentes sur différents OS. Je ne vois pas vraiment de bonne solution à ce problème, sauf, comme l'ont dit d'autres commentateurs, d'utiliser une bibliothèque comme font-awesome.



0
votes

Oui et non, le petit décalage dans l'espacement supérieur ici est causé par le glyphe lui-même et devrait être ajusté via transform: translate ou une marge négative.

Yep...
<div id="div1"></div>

<br/>

Yep again.
<div id="div2">&#x1F464;</div>

<br/>

And yep again.
<div id="div3">&#x1F464;</div>
div {
  position: relative;
  font-size: 2rem;
  border: red 1px solid;
  height: 5rem;
  width: 5rem;
}

#div1:after {
  content: '👤';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#div2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

#div3 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}


2 commentaires

Merci. Cependant, l'emoji n'est en fait pas parfaitement aligné verticalement. Si vous augmentez la taille de la police de 2rem à 3rem, cela devient plus facile à voir.


@LeoGalleguillos d'où le premier commentaire de phrase avant l'exemple. À votre santé :)



0
votes

J'ai déplacé les styles vers un élément enfant que j'ai ajouté pour entourer le glyphe. J'ai supprimé la propriété line-height car cela gênait le rendu entre navigateurs et j'ai ajouté une petite quantité de rembourrage inférieur pour compenser l'espace naturel du glyphe lui-même. J'ai également ajouté une Variable CSS pour minimiser la répétition d'une valeur répétée. Cela a facilité les tests à différentes tailles. Testé sous Mac Firefox / Chrome / Safari (tous les plus récents).

<div>
  <span class="small">&#x1F464;</span>
</div>

<div>
  <span class="medium">&#x1F464;</span>
</div>

<div>
  <span class="large">&#x1F464;</span>
</div>
div {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.small {
  --symbol: 50px;
}

.medium {
  --symbol: 100px;
}

.large {
  --symbol: 150px;
}

div span {
  --symbol: 50px;
  width: var(--symbol);
  height: var(--symbol);  
  font-size: var(--symbol);
  background-color: #f00;
  padding-bottom: 0.06em;
}


2 commentaires

Merci! Je n'aime vraiment pas le rembourrage personnalisé de 0,06em pour cela, mais c'est peut-être la seule solution.


@LeoGalleguillos Croyez-moi, je déteste ça aussi. Je n'ai trouvé aucun autre moyen de contourner cela et j'ai enfin pu voir un rendu cohérent entre les navigateurs.