Discussion :

[filtep]

Bonsoir à tous,

j'ai créé des blocs dans un fichier css, ces blocs s'empilent, ils reçoivent chacun une image identique (dont la taille est exactement celle du bloc), jusque là tout est OK, chacun de ces blocs reçoit ensuite un lien texte, hors le texte n'est pas centré verticalement... j'ai essayé dans le code css du bloc: vertical-align:center; sans succès, ça ne doit pas être bien sorcier mais je bloque...

merci pour votre aide

A+
philippe

[lautrejojo]

Est ce que tu connais la taille de ces blocs ?

Dans ce cas, tu peux fixer de manière absolue un margin-top= x-y px
- x= 50% de height du block, en pixel
- y= 50% de height de ton lien, en pixel

Dans le cas contraire :

Code css :

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

1
2
3
4
5
6
7
8
 
a
{
    display: block;
    height: 20px;
    padding-top: 50%;
    margin-top: -10px; /*(la moitié de la hauteur de a)*/
}

Tiens nous au courant si c'était suffisant ;-)

[sagopa]

Il me semble vertical-align: center n'existe pas.
C'est plutôt vertical-align: middle.

Mais ça ne marchera pas, car je crois que vertical-align s'applique uniquement aux tabelaux.

Sinon essaie en ajoutant:

Code :

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

line-height: 20px

[CCyrillus]

bonsoir,

si l'image et le lien se cotoient , il suffit d'appliquer :

Code :

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

a { vertical-align:middle: }

ou

Code :

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

img { vertical-align:middle: }

ou

Code :

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

a , img { vertical-align:middle: }

a et img sont deux element de type inline qui reposent sur l'interligne , vertical-align permet de les repositionner par rapport a cette interligne .

Test visuel sur quelques valeurs :
http://yidille.free.fr/plux/valign/?...et-ses-valeurs

Il faut juste qu'il n'y est pas plusieurs ligne de texte
Si il y a plusieurs lignes , il faudra alors se tourné vers un tableau ou d'autre technique CSS en englobant les textes dans un element adjacent a l'image.

Cordialement

GC