28172 sujets

CSS et mise en forme, CSS3

Centrer pseudo element :before : problème insoluble !

Pages :
Bonjour,

Après moult heures passées à trouver une solution, je m'en remets à la communauté d'Alsacréations.

Je souhaite "tout simplement" centrer horizontalement et verticalement un icon dans un lien, via la notation ":before" (je ne peux pas utiliser de span ou autres à l'intérieur de mes liens : en cause : Drupal 8).

J'ai tout essayé : via line-height/text-align center, position relative/absolute, mais rien n'y fait, l'icon n'est jamais parfaitement centré.

Mon code html :

<ul>
  <li class="item-1"><a href="">Search</a></li>
</ul>

Mon CSS :

ul > li > a {
  font-size:0;
  border-radius: 50px;
  text-align: center;
  height: 50px;
  width: 50px;
  border: 2px solid #ccc;
}

ul > li > a:before {
  font-family:"Glyphicons Halflings";
  font-size: 40px;
  line-height: 50px;
}

ul > li.item-1 > a:before {
  content:"\2b";
}

Jsfiddle pour exemple : https://jsfiddle.net/xmx4xcfc/

Pour info, j'utilise Bootstrap.

Voyez-vous vous d'où vient le problème ?

Un grand merci d'avance
Modifié par Geraldt (05 Feb 2016 - 11:18)
Modérateur
Salut,

Le fiddle c'est ta situation actuelle ? Ca m'a l'air bien centré pourtant non ?
Bonjour,
_laurent a écrit :
Salut,

Le fiddle c'est ta situation actuelle ? Ca m'a l'air bien centré pourtant non ?
Même chose pour moi, du moins tant que je ne zoom pas sur la page.
@_laurent Oui on peut dire que c'est ma situation actuelle, bien que j'essaie encore actuellement d'autres solutions mais peu concluantes.

C'est très étonnant que vous voyiez l'icon centré, quelqu'un d'autre m'a également dit ça, or, je le vois clairement décalé.

Voici une copie d'écran :
http://www.hostingpics.net/viewer.php?id=198883screenshot.png

Savez-vous d'où peut venir le problème ?

Je ne peux pas laisser mon menu en l'état, étant donné que potentiellement d'autres verront aussi ces icônes décalés
Modifié par Geraldt (05 Feb 2016 - 11:48)
Pas sûr que l'utilisation de contenu généré ne soit le choix le plus judicieux à faire.
Tu n'y a peut-être pas prêté attention mais dans mon commentaire précédent je fais aussi au comportement de ton contenu sous l'effet du zoom.

Une image vectorielle ou statique serait peut-être plus approprié, ne crois-tu pas ?
Modifié par Greg_Lumiere (05 Feb 2016 - 11:51)
Tu proposes de passer par un background-image ?

Car je ne peux malheureusement passer que par du CSS.

Problème du background-image : je ne dispose des icônes que sous la forme de police Smiley smile

C'est un peu casse-tête...

Edit : rectification, j'ai aussi un fichier .svg, mais sauf erreur de ma part cela nécessite d'ajouter une balise, ce qui n'est pas possible dans ce cas de figure
Modifié par Geraldt (05 Feb 2016 - 11:59)
Si la contrainte est d'utiliser unique le Css alors oui l'idéal est de placer l'image dans le background.

Ton fichier Svg peut aisément être convertit en png (ou jpeg si tu préfères).

Dans le cas où tu peux héberger le fichier image, je dirais no soucie.

Sinon il reste la possibilité d'inclure l'image en base64 directement dans le Css.
Modérateur
Perso je suis pas convaincu que ce soit beaucoup mieux de passer par une image externe... surtout si tu dispose déjà de la font-icon.

Au passage on a pas exactement le meme CSS entre ton fiddle et ta capture d'écran.

Pour moi ta méthode avec le text-align:center; sur le parent et la height du parent égale au line-height c'est tout à fait correct pour centrer l'icone, par contre j'aurais tout mis sur le parent, pas sur le before :
ul > li > a {
  display: inline-block;
  text-decoration: none;
  border-radius: 50px;
  text-align: center;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border: 2px solid #ccc;
}


Je trouvais d’ailleurs le font-size:0; sur le <a> en fait c'est pour virer le texte "search" ?! Il y a moyen que ce soit un reste de ce texte qui décale ton icone... essaie de virer tout le texte dur html pour voir :

<ul>
  <li class="item-1"><a href=""></a></li>
</ul>


Sinon t'es sous quel navigateur ? Ça te le fait sur tous ?
Donc le background-image n'est pas la méthode à privilégier.

C'est vrai que l'avantage de la font-icon est appréciable : pouvoir jouer sur la taille / couleur facilement etc.

J'ai essayé avec ta méthode _laurent, tout sur le parent et sans le texte mais ça ne change rien.

En jouant sur le line-height (ce qui est bizarre) j'arrive à avoir mon icon centré sous Safari, par contre rien à faire sous Firefox... l'icon est chez moi toujours décalé...
Hello Yordi,

Merci pour ta proposition, mais chez moi l'icon n'est pas centré Smiley decu (firefox et safari)
Modérateur
C'est fou parceque ton premier lien avec le fiddle chez moi il passe super bien sous IE FF et Chrome. Ya juste sous Safari qu'il est décalé a gauche mais quand je vire le texte "Search" il se centre parfaitement sur Safari aussi.
upload/42161-centrageic.jpg

@Yordi : Chez moi, quelque-soit le navigateur ta solution est toute ovale et la croix pas centrée Smiley confus
_laurent a écrit :
C'est fou parceque ton premier lien avec le fiddle chez moi il passe super bien sous IE FF et Chrome. Ya juste sous Safari qu'il est décalé a gauche mais quand je vire le texte "Search" il se centre parfaitement sur Safari aussi.

Comment c'est possible ?

En effet c'est fou, et c'est en train de me rendre fou Smiley smile

Je ne pensais pas qu'un simple menu me prendrait autant de temps.
eventuellement, si flex te convient tu peut t'en servir sur le pseudo element:

https://jsfiddle.net/xmx4xcfc/7/
ul > li > a:before {
  font-family:"Glyphicons Halflings";
  font-size: 50px;
  display:flex;
  height:100%;
  width:100%;
  align-items:center;
  justify-content:center;
}


Pour tester le centrage, tu peut te servir momentanément d'une mire en fond sur a : 
background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50%),linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%)

Cdt
Merci gc-nomade, pratique la mire en fond.

Elle m'a d'ailleurs permise de voir qu'encore une fois chez moi, l'icon n'est pas centré (avec display: flex)

upload/61163-iconcentre.png
bonsoir, sous w7 chrome,safari,opera,FF,IE j'ai le même renduavec le test suivant:

- avec la font chargée,
- avec ou sans bordures
- avec un zoomx3 pour percevoir un peu mieux le decalage (minime en fait)
https://jsfiddle.net/xmx4xcfc/9/ (ajout des prefixes pour les navs plus anciens)
Modérateur
Bonjour,

Je n'ai pas bien compris ce qui doit être centré. Est-ce le "+" qui doit être centré au milieu du cercle, ou bien est-ce l'ensemble "+" + cercle qui doit être centré (horizontalement sur sa ligne ?) ?

Amicalement,
parsimonhi a écrit :
Bonjour,

Je n'ai pas bien compris ce qui doit être centré. Est-ce le "+" qui doit être centré au milieu du cercle, ou bien est-ce l'ensemble "+" + cercle qui doit être centré (horizontalement sur sa ligne ?) ?

Amicalement,


Perso j'ai compris que le texte/icone était à centré ... ma prochaine proposition allait être un compromis visuel en ajoutant un léger ombrage.

si je suis a coté de la plaque, désolé du dérangement,

Bonne soirée Alsanautes
Modérateur
Bonjour,

J'image qu'il s'agit de centrer le plus au milieu de son cercle.

Je ne connais pas le comportement du "+" de la police "Glyphicons Halflings". Mais il me semble a priori illusoire d'espérer le centrer partout.

A titre d'exemple avec des caractères que je connais mieux, ci-dessous, je mets les deux mêmes flèches sur chaque ligne, et sur la première ligne, je les écris sans espace entre elles, et sur la deuxième ligne, je mets un espace entre elles. La deuxième flèche change carrément de forme.

??
? ?

EDIT : aie, pas vu que ça ne marchait pas sur le forum de mettre les caractères directs. Voici une version codée :
&#8601;&#8600;
&#8601; &#8600;

EDIT2 : qu'il va vous falloir recopier quelque part pour voir quelque chose ! Désolé !

EDIT3 : un jsfiddle http://jsfiddle.net/28q1bwtq/

Il vaudrait mieux faire le "+" avec des bordures ou du javascript ou du svg.

Amicalement,
Modifié par parsimonhi (05 Feb 2016 - 19:51)
Pages :
Sujet clos
Aller à