18008 sujets

Questions générales et questions de débutants

[Résolu] Centrage vertical

Bonjour

Dans le cadre de la refonte de mes sites pour utiliser des technos à la mode, je tombe à nouveau sur le problème du centrage vertical des images. Dans la page actuellement en ligne, je le fais par Javascript au lancement de la page, je pense du reste que je n'avais guère d'autre choix pour que ça fonctionne sur les navigateurs les plus courants au moment où je l'ai faite. Mais j'aimerais bien laisser les navigateurs jouer leur rôle.

J'ai beau lire et tenter d'appliquer les tutoriels, rien n'y fait, comme on peut le voir à cette adresse
http://www.alma-musica.net/tests/page1.html Smiley sweatdrop

Je viens donc, toute honte bue Smiley confused , battant ma coulpe, avec de la cendre sur la tête et la corde au cou comme les bourgeois de Calais Smiley bawling , poser à nouveau cette question.

Voici le code pour inspection par vos yeux avisés. La directive "vertical-align:middle;" qui est censée traiter le problème ne lui fait ni chaud ni froid.
Comme d'hab', ça doit être un machin qui crève les yeux....

html, body{
                font-family:"Myriad Pro", "Trebuchet MS", Arial, Geneva, sans-serif;
                background:transparent;  /* pour les autres pages */
                width:100%;
                height:100%;
                margin:0;
            }
            body{ /* spécial première page pour faire joli */
                background:url('http://www.alma-musica.net/images/golden-bg.png') rgb(196, 170, 47);
            }
            #PageWrapper { /* totalité de la page */
                display:table;
                width:100%;
                height:100%;
            }
            #PageContent { /* le haut de la page */
               display:table-row;
               height:90%;
            }
            #logo {
                display:block;
                height:50%;
                margin:auto;
                vertical-align:middle;   /* <--- le truc qui foire */
            }
            #PageFooter {
               display:table-row;
               height:10%;
               text-align:center;
            }
            #titleImage {
                display:inline-block;
                height:90%;
            }




<body>
        <div id="PageWrapper">
            <header id="PageContent">
                <img id="logo" src="http://alma-musica.net/images/Logo-fond-fonce.png" alt=""/>
            </header>
            <footer id="PageFooter">
                <img id="titleImage" src="http://alma-musica.net/images/titre-long.png" alt=""/>
            </footer>
        </div>
   </body>


Autant l'image du bas peut bien se trouver en haut du <footer>, autant j'ai absolument besoin que l'image du haut se centre verticalement dans le <header>
Modifié par PapyJP (04 Mar 2015 - 16:27)
Modérateur
vertical-align: middle permet de gérer l'alignement sur la ligne de texte, ou, dans le modèle tabulaire, l'alignement de la cellule.

Dans le premier cas il faut l'appliquer sur l'élément que l'on souhaite centrer, dans le second il faut l'appliquer sur la cellule elle-même (l'équivalent du vieux valign="").

Pour l'alignement vertical dans le modèle tabulaire, il te suffit de faire:


#PageContent {
    display: [b]table-cell[/b];
    height: 90%;
    vertical-align: middle;
}


Pour utiliser l'astuce du vertical-align sur les hauteurs de ligne, il faut forcer la hauteur de ligne à s’agrandir. Comme dans ce cas elle est dynamique cela nécessiterait de rajouter des éléments inutiles et pleins de bricolage. Bref, pas glop.
Merci kusto

SI je comprends bien, après m'être fait copieusement insulter pendant des années pour avoir utilisé des tables (même pour des données tabulaires) par les tenants de la "religion prétendue réformée" la solution consiste à les faire revenir par la petite porte.
J'avais commencé par mettre le vertical-align dans le table-row, ce qui marche habituellement avec les <tr>, mais ça ne donnait rien.
Encore heureux qu'il ne soit apparemment pas nécessaire d'ajouter un table-row-group autour du table-row (Pitié! pas taper, j'le f'rai plus!) Smiley bawling
Smiley smile
J'ai finalement écrit

          #PageWrapper{
                display:table;
                width:100%;
                height:100%;
            }
            header {                /* j'ai enlevé l'id du header */
                display:table-row;
                height:90%;
            }
            #PageContent{     /* et j'ai mis une div #PageContent autour de mon image de logo */
                display:table-cell;
                height:100%;
                vertical-align:middle;  /* et bien sûr remis l'alignement vertical à sa place */
            }
Modérateur
Pour l'alignement vertical c'est ce qu'il y a de plus solide. Sinon bientôt on pourra utiliser flex. (On peut déjà mais la compatibilité n'est pas encore top).

p.s: Un des multiples avantages de passer par le css, c'est que l'élément en display: table-row est optionnel. (Le moteur ajoute un élément anonyme) il est donc possible d'avoir: (ainsi que display: table, mais là il est nécessaire pour le width: 100%;)


<body style="display: table; width: 100%; height: 100%;">
  <div style="display: table-cell; vertical-align: middle; height: 90%; text-align: center;">
    <img src="http://alma-musica.net/images/Logo-fond-fonce.png" alt="Alma musica">
  </div>
  <footer style="display: table-row; text-align: center;">bla blah</footer>
</body>

Modifié par kustolovic (04 Mar 2015 - 21:51)
Sujet clos
Aller à