Bonjour, 

je souhaite centrer les images de mes balises <figure> dans une <div id="book">.

#book {
    padding-top: 6%;
    text-align: center;

}

En mettant une height fixe j'obtiens des <figure> fixes qui ne bougent pas quand on survole l'image mais l'image est fixée en haut.

figure {
    display: inline-block;
    vertical-align: middle;
    margin: 1em 0;
    height: 490px;
    width: 390px;
}

figcaption {
    color: rgba(255,255,255,.7);
    font-style: italic;
    text-align: center;
}

img {
    max-height: 400px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    transition: all 1s ease; 
}

img:hover { 
    max-height: 460px; 
    cursor: pointer;
}

En enlevant cette height, j'obtiens ce que je veux mais toutes les <figure> se décalent au survol. 

figure {
    display: inline-block;
    vertical-align: middle;
    margin: 1em;

}

figcaption {
    color: rgba(255,255,255,.7);
    font-style: italic;
    text-align: center;
}

img {
    max-height: 400px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.4);
    transition: all 1s ease; 
}

img:hover { 
    max-height: 460px; 
    cursor: pointer;
}

Je souhaite que seule l'image survolée soit modifiée en taille et reste centrée. 

Les autres éléments ne doivent pas bouger.

Merci de vos conseils... 

Lien vers le site

-
Edité par lapin2jade 17 mars 2019 à 12:38:06

Bonjour,

essaye les flexbox pour garder ton imager centrer verticalement et horizontalement.

figure{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

Pour apprendre flexbox rapidement : https://flexboxfroggy.com/#fr

Merci @Charbon pour cette astuce que je ne connaissais pas.

Ça donne le résultat voulu, hélas avec display: flex, ma grille d'images devient une colonne d'items verticale centrée à gauche!

Et si je mets display: inline-flex, je récupère l'alignement, mais du coup ça ne fonctionne plus: tous les éléments descendent avec le zoom... 

j'ai essayé de triturer un peu le code en me familiarisant avec la notion, mais rien n'a marché pour l'instant. 

-
Edité par lapin2jade 18 mars 2019 à 18:55:18

Alors déjà je te conseille de mettre tes trois boutons du menu dans une DIV pour commencer ce sera bien mieux pour travailler sur la mise en page.

Le HTML

<div id="header">
    <button class="tablink" onclick="openPage('book', this, 'rgba(70,70,70,1)')" id="defaultOpen" style="background-color: rgb(70, 70, 70);">Book</button>
    <button class="tablink" onclick="openPage('about', this, 'rgba(70,70,70,1)')">À propos</button>
    <button class="tablink" onclick="openPage('contact', this, 'rgba(70,70,70,1)')">Contact</button>
</div>

Puis pour le CSS on utilise aussi les FlexBox

#header{
    display: flex;
}
.tablink {
    background-color: rgba(60,60,60,1);
    border: none;
    padding: .8em;
    font-size: 17px;
    flex: 1;
}

Le id="header" est en display: flex;, cela permet de travailler avec les enfants de id="header".

flex: 1; pour les enfants de id="header" équivaut à ton width: 33.3%;, chacun des enfants se partagera la place disponible pour le coup.

Ok, j'ai mis une balise <header>  puis j'ai ajouté une ligne à #book:

#book {
    display: flex;

}

Seulement mes <figure> restent empilées verticalement... 

flex-direction: row; la solution à ton problème actuel.

Voilà où j'en suis:

#book {
    display: flex;
    padding-top: 6%;
    text-align: center;
}

#about,#contact {
    padding: 5%;
}

figure {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 1em 0;
    height: 500px;
    width: 400px;   
}

Ca ne marche pas!

text-align: center; tu l’enlèves puisque que nous allons travailler sur le positionnement avec FlexBox.

justify-content et flex-direction c'est pour le #book

C'est mieux ainsi:

figure {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

Revient à 0 comme sur ton site et commence par ça

<div id="book" class="tabcontent" style="display: block;">

à remplacer par ça

<div id="book" class="tabcontent" style="display: flex;">

Je te propose de le faire en live, comme ça tu peux voir ce que ça fait sans capture d'écran ok?

Voilà, j'ai remis comme tu dis.

Tu faisait pas les changements en local? Parce-que moi je voyais aucune modification. En tout cas, voila ce que j'ai moi après avoir mis #book en flex

Alors pardon car en effet j'avais oublié de changer le code de index.html.

C'est fait maintenant. Par contre ça ne change rien... j'ai essayé de mettre le flex sur index comme tu as fait mais c'est idem...

Conflis, style="" est prioritaire enlève le de la page index.html

Il n'y est plus. En fait je ne mets jamais de css dans mon html, toujours dans un fichier .css à part.

C'est le code javascript 

Oui je viens trouver aussi!

Je vais devoir enlever ça et refaire ma mise en page. 

Utilise jQuery pourquoi pas et moi j'ai l'habitude d'ajouter des class ou d'en enlever au lieu de modifier directement le style.

Finalement j'ai enlevé le js, et du coup je suis revenu au point de départ et pas moyen de centrer verticalement ces img dans leur <figure>!

voilà ce qui va le moins mal:

#book {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 6%;
}