28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrage vertical (again!!!)

Bonjour à tous

Je ne suis toujours pas au point avec le centrage vertical. Pour la nième fois je viens vous demander de m'aider à traiter ce problème.

Voir la page de test: http://paralletes.free.fr/tests/figure.html

Explication:
- l'élément #pageTitle est une <figure> contenant une image <img>, avec un texte <h1> dans une <figcaption> qui vient s'y superposer
- ce texte disparait quand la souris vient dessus (gadget apparemment sans importance)

J'ai mis
- <figure> position:relative;
- <figcaption> en position:absolute; display:table-cell;
- <h1> en display:inline-block; et vertical-align:middle;
J'ai mis des cadres en couleur pour m'assurer que les différents éléments ont bien les dimensions espérées.
Tout va bien, sauf que que "vertical-align:middle;" ne donne pas le résultat escompté.

Noter qu'il n'y a aucune dimension, ce code CSS devant pouvoir s'adapter à de nombreux cas de figure selon la taille de l'image, du texte et de l'écran.

Merci de votre aide pour démêler cet écheveau.
Administrateur
Hello,

Vite fait sans regarder ta page : 
<figcaption> en position:absolute; display:table-cell;


C'est l'un *ou* l'autre. Un élément en position absolute écrase systématiquement toutes les valeurs de display. Ton "table-cell" est donc ignoré.
Raphael a écrit :

Vite fait sans regarder ta page : 
<figcaption> en position:absolute; display:table-cell;


C'est l'un *ou* l'autre. Un élément en position absolute écrase systématiquement toutes les valeurs de display. Ton "table-cell" est donc ignoré.

Effectivement, mais si je supprime le display, ça na marche pas mieux!
Est-ce à dire qu'on ne peut mettre en absolu que des blocs? Effectivement, ça parait assez logique.
Modifié par PapyJP (06 Jan 2016 - 13:34)
Bonsoir,

un h1 en display:flex et un child en margin:auto; serait là la soluce la plus simple a mettre en oeuvre.
http://codepen.io/anon/pen/eJvKww

P.S. les tests sur un éditeur en ligne externes sont cools, pas besoin de tout recopier et d'un hébergement perso pour refiler une simple démo un poil modifiée Smiley smile
gc-nomade a écrit :

un h1 en display:flex et un child en margin:auto; serait là la soluce la plus simple a mettre en oeuvre.
http://codepen.io/anon/pen/eJvKww

Ouille!! Flex? Smiley eek
Compte tenu du support inégal de cette propriété et de mon âge avancé, je pensais pouvoir me dispenser d'apprendre cette nouveauté. Je crains devoir m'y mettre Smiley sweatdrop
Mais que va-t-il se passer sur un navigateur qui ne supporte pas flex?
gc-nomade a écrit :

P.S. les tests sur un éditeur en ligne externes sont cools, pas besoin de tout recopier et d'un hébergement perso pour refiler une simple démo un poil modifiée Smiley smile

Encore un truc à apprendre, si je comprends bien? Smiley eek Smiley sweatdrop Smiley sweatdrop Smiley sweatdrop

... et bien entendu merci pour ton aide! Smiley smile
je t'en pris.

En alternative ici à flex, il y a aussi inline-block pour centré 2elements cotes à cotes et l'un sur l'autre, avec un pseudo en height: 100%; tu peut retrouvé le même résultat visuel: http://codepen.io/anon/pen/rxyZOm

Pour créer un pen anonyme : http://codepen.io/pen , en cliquant sur l’icône paramètres, tu peut ajouter tes feuilles de styles déja faites et autres framework Smiley smile
gc-nomade a écrit :

En alternative ici à flex, il y a aussi inline-block pour centré 2elements cotes à cotes et l'un sur l'autre, avec un pseudo en height: 100%; tu peut retrouvé le même résultat visuel: http://codepen.io/anon/pen/rxyZOm

Voilà qui convient mieux à mes habitudes.
SI je comprends bien, l'astuce est de définir un "before" vide de hauteur 100% et centré verticalement, ce qui force le h1 à prendre également toute la hauteur.
Pourquoi le "height:100%;" du h1 ne suffit-il pas à obtenir ce résultat?
Modifié par PapyJP (07 Jan 2016 - 00:13)
PapyJP a écrit :

SI je comprends bien, l'astuce est de définir un "before" vide de hauteur 100% et centré verticalement

oui
PapyJP a écrit :
ce qui force le h1 à prendre également toute la hauteur.

non, le pseudo herite de la hauteur de h1 déclarée
PapyJP a écrit :

Pourquoi le "height:100%;" du h1 ne suffit-il pas à obtenir ce résultat?

Il est nécessaire uniquement pour se positionner au dessus de ton image et donner une hauteur de référence exploitable par ses enfants ou pseudos-elements.

ici tu as un span en inline-block, que tu pourrais positionné en vertical-align:middle; sur un line-height de la hauteur du h1 ou au coté d'un autre élément inline-block de la hauteur du h1 (ici un pseudo) Cela peut-être aussi une balise reformaté ou une image (le bon vieux gif transparent d'1pixel étiré sur la hauteur ... si cela te parle Smiley cligne le cousin du spacer.gif )
Hmm!
Si je comprends bien, il faut un élément bidon qui fasse toute la hauteur du <h1> et à l'intérieur du <h1> pour que le vertical-align:middle de l'élément <span> soit effectif.
En d'autres termes, ça veut dire que vertical-align:middle; ne signifie pas: "mettez ça au milieu de mon parent", mais "alignez ça avec mes frères par le milieu".
Ça me semble vraiment farfelu comme comportement!
Est-ce bien ça ou est-ce que je n'ai (une fois de plus) rien compris au comportement de ce bidule???
Modifié par PapyJP (07 Jan 2016 - 19:42)
vertical-align a 2 casquettes:

1) celle d'aligner verticalement le contenu au sein d'une cellule de tableau ou formater comme telle.

2) d'aligner un element de type inline/inline-block sur le baseline.

Pour du texte, on se trouve sur une interligne d'un 1.2em en moyenne, là aucune surprise et les valeurs de vertical-align sont comprise par tous ( sup pour ecrire un m² ... si on a pas la touche pour Smiley smile , pour les autres valeurs on assimile de suite.

Lorsque l'on a des images on des éléments de formulaire par exemples, la c'est moins clair , car on s'attend toujours a une interligne de la hauteur d'un texte. En fait, la hauteur de l'interligne est imposé par l’élément le plus haut. Donc a la place d'un pseudo si tu met une lettrine de 70px de haut, l'alignement vertical a coté de celle-ci te paraitras probablement moins étrange que la pseudo boite, mais, c'est la même chose.
++
Waouh!
Dit autrement, ça signifie que le:before est là pour dire que la hauteur de ligne est 100% de <h1> et l'élément suivant (le <span>) vient se positionner à mi hauteur.
Est-ce que cette fois j'ai compris quelque chose, ou est-ce que je me goure une fois de plus?
Modifié par PapyJP (07 Jan 2016 - 22:48)
Sujet clos
Aller à