Discussion :

[criquety]

Bonjour,

j'aimerais trouver un moyen d'aligner le texte de mes boutons par rapport au haut du bouton.

J'ai beau chercher, je ne trouve pas. Cela est il possible ?

Merci

[{F-I}]

Salut,

Voulais-tu aligne le texte en hauteur d'un bouton ? (que le texte soit centré en hauteur d'un bouton) ?

Quel est le forme de ce bouton ?

[criquety]

oui c'est ça !

j'ai un bouton carré et je voudrais etre capable (via un css ) de mettre le texte tout en haut du bouton.

[{F-I}]

Pour centrer en verticalement, essaie peut-être avec cela vertical-align: (ensuite faudrait trouver l'indication voulue)

[criquety]

J'ai essayé, cela centre différement le bouton ce qui peut donner l'impression que le texte est centré sur le haut du bouton.

Comme j'ai de fortes contraintes de positions pour mes boutons je ne peux pas utiliser cela.

[{F-I}]

Le plus simple serait que tu nous montre le code source

[criquety]

Je créé tout simplement mes boutons comme ça :

<button id=\""+this.id+"\">"+this.label+"</button> (dans un petit code javascript)

J'ai des lignes de boutons centrées dans des div.

Et j'ai un style dans un CSS pour mes boutons. Et je voudrais pouvoir centrer le texte du bouton verticalement sans bouger le bouton lui meme qui doit rester centré dans sa div

[Damouille]

Tu peux jouer sur la position du texte si celui-ci se trouve dans une balise. Exemple :

html

Code :

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

1
2
3
<div>
<le bouton class="style-bouton"><p>texte du bouton</p></bouton>
</div>

css

Code :

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

.style-bouton p {margin-top: 2px}

Ceci va décaler juste le texte et pas le bouton. Par contre, ce sera centré automiquement.

[criquety]

ouki je vais tester ça !

merci beaucoup

[criquety]

lorsque j'utilise le margin cela ne fait rien ...
Seul le padding-bottom bouge le texte. Le problème c'est mon texte est variable donc je peux pas utiliser un attribut qui centre par rapport au bas du bouton.

[Damouille]

Dans ce cas, essaie le line-height, ca va marcher

[criquety]

Cela fonctionne que si j'ai plus d'une ligne non ?

[Damouille]

Si, ca marche des la première ligne. Mais le mieux c'est que tu testes, tu verras bien. Essaie avec un line-height: 20px; par exemple

[onirisme]

Code css :

Code :

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

1
2
3
4
5
6
7
8
 
.bouton{
    display: block;
    text-align: center;
    vertical-align: text-top;
    height :140px;
    width : 140px;
}

Code HTML

Code :

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

1
2
3
 
<button><span class="bouton">Un bouton</span></bouton> 
<button><span class="bouton">Un bouton avec un texte beaucoup plus long afin de le centrer et voir le resultat</span></bouton>

Fonction sous FF, non tésté sous IE

[criquety]

malheureusement cela ne fonctionne que lorsque j'ai plus d'une ligne sur mon bouton.

[onirisme]

Regarde à cette adresse, est ce que sur le premier bouton le texte est placé en haut?
http://onirisme.free.fr/dvp/

Si ça ne marche pas, essaye avec

display: table-cell;

Je crois que ça fonction sous IE mais pas sûr je suis sous Linux

[criquety]

waw génial ! ça fonctionne nickel chez moi !
tu me sauves !

Merci !

[Damouille]

malheureusement cela ne fonctionne que lorsque j'ai plus d'une ligne sur mon bouton.

Tu m'en vois tout étonné! Le line-height définie la hauteur des lignes, aussi bien pour la première que les suivantes. Si la hauteur de ligne est plus grande (genre 40px), et que le texte est aligné en bas (c'est la cas par default) alors le texte descends.

Bon tu aurais un lien ou un bout de code pour tester?