web-dev-qa-db-fra.com

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

J'essaie de centrer le lien avec l'image, mais n'arrive pas à déplacer le contenu verticalement de quelque manière que ce soit. 

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

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;
}
csscss-content
87
theorise

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

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

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

23
Chowlett

Vous pouvez également utiliser des tables pour y parvenir, 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/

15
fassl

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

En html:

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

Et en css:

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

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

9
Sander van den Akker

Déconner avec l'attribut line-height devrait faire l'affaire. Je n'ai pas testé cela, donc la valeur exacte peut ne pas être exacte, 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; }
6
Mathew

Je viens de trouver une solution intéressante, je pense. L'astuce consiste à définir le line-height de l'image (ou de son contenu) height.

Utilisation de 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 durée.

4
JoomFever

J'ai passé beaucoup de temps à essayer de résoudre ce problème aujourd'hui et je n'arrivais pas à faire fonctionner les choses en utilisant line-height ou vertical-align. La solution la plus simple que j'ai pu trouver consistait à configurer le <a/> pour qu'il soit relativement bien positionné de manière à ce qu'il contienne des absolus, et le: après être positionné de manière à le retirer complètement du flux.

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

L'image après semblait se centrer automatiquement dans ce cas, au moins sous Firefox/Chrome. Cela peut être un peu plus compliqué pour les navigateurs ne prenant pas en charge: après, en raison de l'espacement excessif sur le <a/>.

4
Kenneth M. Kolano

J'avais un problème similaire. Voici ce que j'ai fait. Puisque l'élément que je tentais de centrer verticalement avait height = 60px, j'ai réussi à le centrer verticalement en utilisant:

en haut: calc (50% - 30px);

0
user2606576

L'utilisation de boîtes flexibles a fait l'affaire pour moi:

.pdf:before {
    display: flex;
    align-items: center;
    justify-content: center;
}
0
David Refoua