[Résolu] Alignement vertical décalé de quelques pixels

Salut,

Je suis dans la situation suivante : je dois aligner deux lignes de texte dans un div, verticalement. L'une est un titre, l'autre un sous-titre, les deux vivent l'une au-dessus de l'autre, empilées, et l'ensemble formé de ces deux doit se trouver pile au centre, verticalement parlant, d'un div (une "barre de titre"). Un aperçu du machin, j'ai ajouté du rouge pour que vous voyiez bien le problème.

Comme mon div parent est de hauteur fixe, j'ai suivi ce tuto du site. Il m'a semblé que ça fonctionnait, mais à y regarder de plus près, je semblais décalé de quelques pixels (cf. l'image ci-dessus).

J'ai donc fait un cas plus simple dans une page de test, et je ne m'étais pas trompé : contrairement à l'exemple donné sur le lien ci-dessus, qui est parfait, lorsque j'essaie j'ai toujours un petit décalage sur le plan vertical, ce n'est pas parfaitement centré. A grosse échelle ce n'est pas dérangeant, mais sur ma fine barre de titre on ne voit que ça.

Voici le lien vers un exemple (le même que sur alsacreations !) : ici. J'ai utilisé une extension Firefox qui fournit une règle permettant de mesurer les distances : 33px de "marge" en haut, 31px en bas (ou 30, difficile à dire). Un type sur IRC a tenté chez lui et obtenu les mêmes résultats. J'ai essayé sur Chrome, même résultat.

Bien sûr je pourrais utiliser du flex, ça marche parfaitement mais niveau reconnaissance par les navigateurs c'est pas trop ça, surtout niveau IE.

Merci d'avance !
Modifié par Biganon (22 Feb 2015 - 13:46)

Bonsoir,

Peut-être un petit souci de fusion des marges ?
(Penser au rendu par défaut des éléments HTML)

Effectivement,

Sur la page du tuto il est bien expliqué:

a écrit :
La plupart des techniques présentées ici utilisent du line-height sur des éléments (de nature ou modifiés) inline. Ce qui veut dire que le résultat peut varier en fonction de la police utilisée et de sa taille (donc du navigateur, du système d'exploitation, etc.). D'une manière générale, n'utilisez pas ces techniques pour créer des gabarits où les éléments sont alignés au "pixel près", mais plus pour réaliser les mises en forme de vos contenus.

La raison est que l'alignement «middle» aligne en fait: « Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. »
Ou en français «Aligne le point au milieu de la boîte avec la ligne de base du parent plus 1/2 hauteur d'x du parent.»
Si ce comportement peut sembler étrange la raison en est:

- Les bandes grises sont la hauteur de ligne
- Les lignes bleues sont la ligne de base du parent plus la moitié de la hauteur d'x
- Les lignes rouges sont la moitié du parent
- Les boites violettes sont des éléments inline-block placés en vertical-align: middle

On remarque que cela change selon la police, et aussi que le vertical-align: middle est prévu pour aligner esthétiquement un élément au centre visuel d'une ligne de texte.
Comme on le voit sur mon exemple, des typo avec des faibles jambages supérieurs (comme Helvetica, arial, verdana, etc. sont souvent très proches et parfois précisément au centre de la boîte. Mais ce n'est pas une valeur sûre.

la solution est vertical-align dans un contexte de table (qui aligne bien les deux centres dans ce cas). donc un display: table-cell.

Merci beaucoup kustolovic ! C'est clair à présent.

J'avais opté pour flex, mais je vais peut-être retenter avec table-cell, afin que le support IE soit meilleur (flex supporté sans préfixe depuis IE11 seulement, table-cell depuis IE8 visiblement).

Ce qui est bizarre, c'est que sur le tuto alsacréations que j'ai cité dans mon premier message, on semble dire que le problème avec un centrage vertical par table-cell c'est que ce n'est supporté par IE que depuis IE8 ; l'alignement vertical par inline-block est du coup proposé en alternative, sauf que d'après caniuse.com, inline-block n'est supporté par IE que depuis... IE8.

Du coup, vu que le support semble être le même, et que la solution inline-block pose des soucis d'imprécision, je ne vois pas trop l'intérêt de cette dernière...
Modifié par Biganon (22 Feb 2015 - 13:57)

J'ai pensé à flex mais en effet la compatibilité n'est pas top.

Il est possible de faire fonctionner inline-block avec ie 6&7 avec un bon vieux hack. Ici à chaque exemple, ils propose une solution compatible IE7 sans le hack.

Mais ce tuto a été rédigé lorsque IE7 était incontournable. Lorsque display: table-cell en était à ce qu'est aujourd'hui flex. ça mériterait une remise en perspective de tout cela.

Pour l'imprécision, il y a plein de cas ou ça nous est bien égal!