Je ne comprends pas pourquoi HTML: P> Vertical-Align: Moyen Code> fait une icône non centrée, mais un peu plus bas. .operatorscreen {
&__single-button {
&:first-child {
margin-bottom: 10px;
}
}
&__link {
color: black;
text-decoration: none;
font-size: 18px;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background-color: red;
}
}
}
3 Réponses :
Essayez-le:
p>
<ul> <li>First icon</li> <li>Second icon</li> </ul>
Vertical-Align: Sub Est-ce que l'astuce, mais je ne l'ai jamais vu auparavant.
Mais pourquoi, SUB est censé fonctionner avec un sous-élément réduit
Lorsque j'utilise une règle sur mesure, il ressemble à Si vous voulez que ce soit "Parfait" alors vous devrez peut-être être plus précis. Il y a beaucoup d'idées, une étant rapide: plus sur la verticale-alignement des éléments en ligne ici: https://css-tricks.com/almanac/properties/v/vertical-align/ vertical-align: moyen se comporte correctement: il est au milieu des lettres minuscules.
J'ai généralement utilisé la position relative non plus, mais ça va faire ça? Semble hacky pour moi.
Oui, c'est un piratage car ce n'est pas quelque chose que vous pouvez normaliser pour la réutilisation des différentes icônes. Si vous me demandez, je ne pense pas que ça a l'air mal comment vous l'avez. En fonction de l'icône réelle que vous utilisez, il sera plus ou moins aligné de toute façon en raison de la forme de l'icône / de l'espace négatif. Je le ferais normalement exactement comme vous l'avez déjà fait, en utilisant vertical-align: milieu .
Génial, c'est «Superscript», qui fait apparaître le texte un demi-caractère au-dessus de la ligne normale. Heureux que cela a résolu votre requête! :-)
C'est en fait au milieu mais vous devez savoir quel est le milieu.
aligne le milieu de l'élément avec
la base de base plus la moitié de la x-hauteur forte> du parent. Ref sup> P> P> blockquote> Voici une illustration pour afficher le milieu de l'élément aligné sur la base de base plus la moitié de la moitié
x-hauteur code>. p>p>
<ul class="operatorscreen__buttons"> <li class="operatorscreen__single-button"> <a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a> </li> <li class="operatorscreen__single-button"> <a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a> </li> </ul>
Vous avez raison, en effet, dans mon cas vertical-align: sous centré. Mais pourquoi? Pourriez-vous expliquer? J'ai vu votre site web, on dirait que vous êtes un gourou CSS :)
@Alexanderkim Vérifiez la mise à jour, non seulement Sub .. Top / Text-Top et Text-Basculeront également ce que vous voulez;)
Néanmoins, le haut est un peu plus élevé maintenant: D Sub est idéal
@Alexanderkim il dépend du navigateur et de la police et de la hauteur de l'élément pseudo. Changez la hauteur et vous verrez que même sous ne vous donnera pas le milieu que vous voulez;) essentiellement verticalement alignez, ne considérez pas le milieu de l'élément comme vous pouvez penser, mais il y a une autre référence, voici une bonne lecture si vous voulez. Pour obtenir plus de détails: Stackoverflow.com/a/54190413/8620333 (vous pouvez également suivre les liens)
Merci d'explication, trop de variables là-bas: hauteur, taille de police, etc ... donc il n'y a pas de règle de balle d'argent pour toutes les icônes à la fois?
@Alexanderkim La règle d'argent et d'or est d'éviter le centrage à l'aide de vertical-alignement :) .. Utilisez d'autres trucs comme Flexbox, position, etc. et vous aurez un résultat plus précis
Est-ce que ça va d'utiliser Flexbox pour l'icône dans mon cas? Je pensais que ce n'est pas une bonne pratique.
@Alexanderkim Si vous l'utilisez correctement, il n'y a pas de problème. Avec Flexbox, vous aurez le centre mort mieux que vertical Align: jsfiddle.net/5z2QPM7V
Vous pensez que c'est plus bas mais c'est au centre. Utilisez des lettres comme
jpq et vous verrez qu'il est centréVous avez tort, il est en fait plus bas, même si j'utilise des lettres minuscules comme première lettre.