comment remplacer le glyphe de la hauteur sans changer la taille de police?

Question

pour les éléments de texte qui sont à côté de l'icône éléments, le glyphe de la hauteur n'est pas aligné avec l'icône de la hauteur. les éléments de texte sont de style en CSS avec font-size: 20px; et de la cohérence de la largeur de toutes leurs instances.

voici une illustration:

pour le cas ci-dessus, le texte doit avoir la même hauteur que l'icône.

Motivation

trouver un moyen de rendre les lettres un peu plus grand pour prendre de l'espace vertical disponible, tout en gardant la font-size comme est. comment faire?

Qu'ai-je essayé?

pour augmenter la font-size un peu, mais il est venu à la conclusion que je vais avoir à faire des compromis pour une petite icône si je ne peux pas augmenter la hauteur de la lettre, donc la question.

InformationsquelleAutor Leron | 2012-06-13

14

Vous pouvez le faire avec la propriété css3 Scale: (démo dabblet.com)

Balisage HTML:
```
lower size
normal size
taller size
```
CSS:
```
span {
 font-size: 20px;
 display: inline-block;
}

span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }
```
Aussi, vous pouvez essayer de définir les différentes valeurs de vertical-align pour les images dans votre cas:
sub, super, bottom, top, middle. Cela peut aider à résoudre votre problème d'un autre point.
- Ne fonctionne pas dans mon cas, mais va accepter cette réponse parce que obv. il résout le problème. Le problème est quelque part dans mon code le plus probablement.
- J'ai ajouté une remarque sur l'utilisation vertical-align pour les images, Peut-être cela peut vous aider
- Merci, va jouer un peu avec vertical-align. Et merci pour l'info, je savais que l'augmentation de la hauteur de la lettre a été possible 🙂
InformationsquelleAutor Vladimir Starkov
2

Essayez d'ajouter line-height: 20px; il ne fera qu'augmenter l'espace entre les lignes. Il devrait vous aider à correspondre à la hauteur d'élément.

Et compte tenu de votre calendrier de l'icône et du texte, ajouter des vertical-align: middle; à l'image.

Démo: http://jsfiddle.net/rBpKL/3/
- Non, cela ne résout pas le problème, au moins dans mon cas. Peut-être qu'après tout je vais augmenter la font-size mais va attendre un peu plus longtemps pour voir si quelqu'un connait une solution.
- Ouais, c'est presque comme il se doit. avec vertical-align les images sont positionnées correctement, mais il n'y a pas d'espace b/w le haut et le bas de l'image et l'ajout de line-height pour la cellule où toutes les données est de ne pas résoudre ce problème. Une idée?
- Vérifier la mise à jour de la démo dans mon post. Espérons que ça aide!
- Merci, de loin, c'est la meilleur variante que j'ai.
InformationsquelleAutor Dipak
1

Non, vous ne pouvez pas faire des lettres plus grand sans augmenter la taille de police, ou de changer de police. En principe, vous pouvez diminuer l'espacement des lettres, de sorte que vous pouvez augmenter la taille de police, sans augmenter la largeur du texte. C'est généralement une mauvaise idée, car elle tend à faire la police pire et souvent moins lisible.

Montrer le réel problème dans le contexte (le code ou l'URL) pourrait aider à trouver une solution.
- Il peut être fait avec scale
- Voir tha sujet principal de l'image et de l'explication que je veux faire.
- voulez-vous verticalement au centre de votre étiquette relativement à des icônes ou vraiment de rendre le texte plus grand?
- Les deux pourrait fonctionner, mais le problème est que la colonne est remplie forme d'une chaîne de caractères contenant tous les le texte comme <img/> balises, texte et ainsi de suite. J'ai donc décidé que la modification de la lettre de la taille serait la manière la plus simple
InformationsquelleAutor Jukka K. Korpela

Vous devez vous connecter pour publier un commentaire.