Discussion :

[dominos]

Bonjour, tout est dans le titre...

Dans un bouton qui effectue un retour à la ligne lorsque le texte est long... je cherche à centrer verticalement l’icône dans le bouton... Savez-vous si c'est possible ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<a href="" class="btn btn-primary">
  <i class="glyphicon glyphicon-chevron-right btn-glyphicon pull-right"></i>
  Texte du bouton qui retourne à la ligne automatiquement... Comment centrer verticalement l'icone ?
</a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.btn-primary {
	background: #759761;
	height: auto !important;
	white-space: normal;
        vertical-align: middle !important;
}
 
.btn-glyphicon {
	background: cyan;        
        margin-left: 10px;
        margin-right: 10px;
}

Merci d'avance pour vos idées,

[NoSmoking]

Bonjour,
une fois de plus il t'es préférable de passer par un « custom class » plutôt que d'essayer de faire cohabiter des choses qui ne sont pas faites pour cela.

A partir du HTML simplifié :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a href="" class="btn btn-primary my-custom-link">
  Texte du bouton qui retourne à la ligne automatiquement... Comment centrer verticalement l'icone ?
</a>

la customisation pourrait être la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.my-custom-link {
  position: relative;
  padding-right: 2em;
  white-space: normal;
  background: #759761;
}
.my-custom-link::after {
  content: "\e080";
  position: absolute;
  top: 50%;
  right: .125em;
  font-family: "Glyphicons Halflings";
  font-size: 1.5em;
  color: #FF0;
  transform: translate(0,-50%);
}

dans le code ci-dessus on utilise la fonte BootStrap mais on peut faire directement et simplement en CSS uniquement.

Le code « équivalent » serait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
.my-custom-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1em;
  height: 1em;
  border-width: .4em .4em 0 0;
  border-style:solid;
  border-color:#FF0;
  font-size: 1em;
  transform: translate(-50%, -50%) rotate(45deg);
}

[dominos]

Super, merci pour l'exemple, c'est exactement le comportement que je souhaitais obtenir...
Manquait juste un -webkit-transform: translate(0, -50%);.

[NoSmoking]

Manquait juste un -webkit-transform: translate(0, -50%);.

tu en as besoin pour quel navigateur ?