Aligne verticalement CSS :before et :after contenu

Question

Je suis en train de centre le lien avec l'image, mais ne semble pas possible de déplacer le contenu verticalement en aucune façon.

<h4>More Information</h4>
<a href="#" class="pdf">File Name</a>

L'icône est de 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;
}

Answer 1

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

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

Answer 2

Je suis pas de CSS expert, mais qu'advient-il si vous mettez de l' vertical-align: middle; votre .pdf:before directive?

Answer 3

Je pense qu'un nettoyant approche est d'hériter de l'alignement vertical:

Dans le html:

<div class="shortcut"><a href="#">Download</a></div>

Et dans le css:

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

De cette façon, l'icône s'aligner correctement dans n'importe quelle résolution/taille de police combinaison. Idéal pour une utilisation avec l'icône polices.

Answer 4

Déconner avec la hauteur de la ligne de l'attribut devrait faire l'affaire. Je n'ai pas testé, donc la valeur exacte ne peut pas être de droite, mais commencer avec 1.5 em, et de modifier, par incréments de 0,1 jusqu'à ce qu'il s'aligne.

.pdf{ line-height:1.5em; }

Answer 5

Je viens de trouver un très soignée de solution, je pense. Le truc est de mettre la line-height de l'image (ou le contenu) height.

texte

À l'aide de CSS:

div{
  line-height: 26px; /* height of the image in #submit span:after */
}

span:after{
    content: url('images/forward.png');
    vertical-align: bottom;
}

Ce serait sans doute également de travailler sans envergure.