Alignement vertical CSS: avant et: après le contenu

J’essaie de centrer le lien avec l’image, mais je n’arrive pas à déplacer le contenu verticalement.

More Information

File Name

L’icône est 22 x 22px

 .pdf { font-size: 12px; } .pdf:before { padding:0 5px 0 0; content: url(../img/icon/pdf_small.png); } .pdf:after { content: " ( .pdf )"; font-size: 10px; } .pdf:hover:after { color: #000; } 

Répondu à ma propre question après avoir lu vos conseils sur l’atsortingbut CSS vertical-align. Merci pour le conseil!

 .pdf:before { padding: 0 5px 0 0; content: url(../img/icon/pdf_small.png); vertical-align: -50%; } 

Je ne suis pas expert en CSS, mais que se passe-t-il si vous mettez vertical-align: middle; dans votre .pdf:before directive?

Vous pouvez également utiliser des tableaux pour accomplir ceci, comme:

 .pdf { display: table; } .pdf:before { display: table-cell; vertical-align: middle; } 

Voici un exemple: https://jsfiddle.net/ar9fadd0/2/

EDIT: Vous pouvez également utiliser flex pour accomplir ceci:

 .pdf { display: flex; } .pdf:before { display: flex; align-items: center; } 

Voici un exemple: https://jsfiddle.net/ctqk0xq1/1/

Je pense qu’une approche plus propre consiste à hériter de l’alignement vertical:

En html:

  

Et en css:

 .shortcut { vertical-align: middle; } .shortcut > a:after { vertical-align: inherit; { 

De cette manière, l’icône s’alignera correctement dans n’importe quelle combinaison de résolution / taille de police. Idéal pour les fonts d’icons.

Jouer avec l’atsortingbut line-height devrait faire l’affaire. Je n’ai pas testé ceci, donc la valeur exacte peut ne pas être correcte, mais commencez par 1.5em, et ajustez-la par incréments de 0.1 jusqu’à ce qu’elle soit alignée.

 .pdf{ line-height:1.5em; } 

J’ai passé beaucoup de temps à essayer de résoudre ce problème aujourd’hui et je ne pouvais pas faire fonctionner les choses en utilisant l’alignement de ligne ou l’alignement vertical. La solution la plus simple que j’ai pu trouver consistait à placer le pour qu’il soit relativement positionné, de manière à ce qu’il contienne des valeurs absolues, et à: être positionné en le retirant absolument du stream.

 a{ position:relative; padding-right:18px; } a:after{ position:absolute; content:url(image.png); } 

La post-image semblait se centrer automatiquement dans ce cas, du moins sous Firefox / Chrome. Cela peut être un peu plus lent pour les navigateurs ne prenant pas en charge: after, en raison de l’espacement excessif sur le .

Je pense que je viens de trouver une solution intéressante. L’astuce consiste à définir la line-height de line-height de l’image (ou de tout contenu) en height .

texte

En utilisant CSS:

 div{ line-height: 26px; /* height of the image in #submit span:after */ } span:after{ content: url('images/forward.png'); vertical-align: bottom; } 

Cela fonctionnerait probablement aussi sans la scope.

J’avais un problème similaire. Voici ce que j’ai fait. Étant donné que l’élément que j’essayais de centrer verticalement avait une hauteur = 60px, j’ai réussi à le centrer verticalement en utilisant:

top: calc (50% – 30px);