Centrer verticalement un :before en absolute

Bonjour les gens

Je cherche à centrer un élément :before en absolute verticalement.

Le problème, c'est que je n'arrive pas à le centrer verticalement car la taille n'est pas fixe, il s'agit d'un élément fluide, donc impossible d'assigner un line-height $px.

J'ai essayer une technique qui consiste à mettre un top: 50% avec un margin-top -10%, mais cela ne centre pas du tout mon élément

Auriez-vous une petite idée ? Voici un petit fiddle : http://jsfiddle.net/ZsJ7B/

Je précise que, pour le centrage verticale d'une image ou d'un block, aucun problème hein, là je parle d'un élément :before en absolute.

Merci à vous !
Modifié par ILeG3nDz (04 Jan 2014 - 17:15)

Bonjour, si ton lien est un carré , alors le pseudo peut-être mis en margin-top:50% , c'est 50% sont 50% de la largeur du parent du pseudo donc le a de a:before.

http://jsfiddle.net/ZsJ7B/1/

margin et padding verticaux en % prennent comme référence la largeur du parent.

par contre je ne comprend pas trop l'exemple, centré verticalement un pseudo qui a la taille de son élément ?

Salut salut,

Merci pour ta réponse

Mon bloc n'est pas un carré, j'aurai du le préciser, désolé

Sinon pour le centrage via l'exemple, c'est parce que j'aurai un icône qui remplacera le texte et qui prendra la totalité du parent, je cherche donc à le centrer comme dans mon exemple.

Mon soucis principale est la fluidité du bloc

as tu tester l'image en background: url(ico.png) center center no-repeat; et le text-indent ?

Du coup, le pseudo est probablement inutile sauf si il sert a couvrir le texte au lieu de l’éjecter avec text-indent.

Les techniques de remplacement de texte par une image ne sont pas nouvelles, il y en a probablement une qui te convient

++

J'utilise une icône via fontello que je préfère de beaucoup par rapport à l'image de fond

Bonjour,

est-ce que l'exemple suivant te convient : http://jsfiddle.net/ZsJ7B/9/ ?
Positionnement à top: 50% et le pseudo-élément a une hauteur de ligne fixée (à 1 mais ça pourrait être 1.5 ou 1.8) puis est remonté grâce à une marge négative égale à la moitié de la hauteur de ligne.

J'ai ajouté un outline et commenté le text-indent négatif pour que la démo soit plus parlante.

EDIT : un text-indent négatif sur un lien provoque un disgracieux focus dont le bord gauche sort de l'écran... Mieux vaut (ne pas cacher du texte ou sinon) cacher du texte avec clip() comme le font les intégrateurs de Yahoo! entre autres. Ne jamais cacher ce focus bien entendu, source : http://outlinenone.fr
Modifié par Felipe (06 Jan 2014 - 14:52)