Placer un caractère dans un button en décalant sa position verticale

**ProgElecT** · 11/01/2019, 16h16

Salut

Un peu de code

Code HTML :

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
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<style>
                        button {
                                position:absolute;
                                left:216px;
                                top:3px;
                                font-size:26px;
                                height:21px;
                                /* padding-top:-2px !important; */
                                /* padding-bottom:2px !important; */
                        }
                </style>
	</head>
	<body>
		<button id="btnRetour" title="Retour">⮲</button>
	</body>
</html>

Une petite image

Nom : BtnFleche.jpg
Affichages : 134
Taille : 4,0 Ko

Voila, en
1 j'ai le caractère que je veux mettre dans le bouton btnRetour
2 le résulta qui ne me convient pas
3 se que je voudrai obtenir.
Je ne peux/veux pas changer la hauteur du bouton, pour être vue correctement, le font-size:26px est à mon avis indispensable.

Est-il possible de centrer verticalement le caractère dans son conteneur Button ?
En dernier recours, je pourrai faire deux images du bouton (une non survoler et l'autre au survole) puis simuler cette image comme un boutton, mais cela me contrarie

Merci de votre aide.

**Sodium** · 11/01/2019, 17h12

Un line-height égal à la hauteur du bouton ne fonctionne pas ?

Sinon ben :

Code HTML :

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
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
    <head>
        <style>
                        button {
                                position:absolute;
                                left:216px;
                                top:3px;
                                font-size:26px;
                                height:21px;
                                /* padding-top:-2px !important; */
                                /* padding-bottom:2px !important; */
                        }
 
                        button span {
                            margin-top: -10px;
                            display: block;
                        }
                </style>
    </head>
    <body>
        <button id="btnRetour" title="Retour">
            <span>⮲</span>
        </button>
    </body>
</html>

**ProgElecT** · 11/01/2019, 17h31

Un line-height égal à la hauteur du bouton ne fonctionne pas ?

Ben non justement, même en lui ajoutant !important.
Merci Sodium c'est

cela fonctionne très bien avec ta solution

**Sodium** · 11/01/2019, 17h34

Pas de problèmes, je te conseille tout de même d'appliquer un reset CSS et de forcer la hauteur du bouton pour ne pas avoir de surprises d'un navigateur à l'autre

**NoSmoking** · 12/01/2019, 09h41

Bonjour,

Envoyé par ProgElect

Je ne peux/veux pas changer la hauteur du bouton, pour être vue correctement,

Lorsque l'on affecte une taille de fonte à un élément la moindre des choses et que celui-ci puisse contenir proprement le texte mis, donc le forcer à une hauteur inférieure au contenu potentiel n'est en soit pas très judicieux.

Il est dans ce cas plus simple de mettre la propriété line-height à 1 pour que le contenu se centre verticalement et que le conteneur s'ajuste à la juste taille.
De plus pour augmenter la hauteur il te suffit de jouer sur la valeur de ta line-height.

Envoyé par ProgElect

... cela fonctionne très bien avec ta solution

Ajouter un élément neutre uniquement dans le but de le décaler à l'affichage j'appelle cela du bidouillage ce qui rend le code inutilement « lourd ».

Envoyé par Sodium

je te conseille tout de même d'appliquer un reset CSS et de forcer la hauteur du bouton pour ne pas avoir de surprises d'un navigateur à l'autre

Si l'on veut appliquer un « reset » pour ce satisfaire l'esprit, notamment pour le padding, il faudrait également redéfinir les styles au :hover, :focus, :active entre autres border-xxxxxx ...

en conclusion, voilà qui devrait être suffisant :
HTML

Code html :

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

<button class="btn-retour" id="btnRetour" title="Retour">⮲</button>

CSS

Code css :

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

1
2
3
4
.btn-retour {
  font-size: 1.625em;   /*26px;/**/
  line-height: 1;
}

Nota :
Pour définir la taille de la fonte, je te conseilles de passer aux unités em (unité relative au parent) ou rem (unité relative au document) et d'oublier les px.

Complément d'information : line-height

**ProgElecT** · 12/01/2019, 10h58

Salut

Merci NoSmoking de ces nouvelles informations.

Je vais revoir la disposition/emplacement de ces 3 boutons en ne passant pas par ce "bricollage" qui, pour l'instant, me permet de continuer à avancer dans mon petit programme.

Placer un caractère dans un button en décalant sa position verticale

Positionnement en CSS

Discussions similaires

Partager

Partager