IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrage vertical dans un div


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Mai 2007
    Messages
    13
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 13
    Par défaut Centrage vertical dans un div
    Bonjour,

    Je suis tout content, j'arrive à mettre mes miniatures photos dans un div et ça fait joli mais bon, ce n'est pas encore ça. Quand la miniature est plus petite que le div, ça me laisse voir le fond, ce ne serait pas bien grave si j'arrivais à centrer l'image mais, s'il est facile de procéder au centrage horizontal, je n'arrive pas à centre la photo verticalement (pour les cas où elle est plus large que haute). Voici le code css que j'ai écrit pour le div en question :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #gallery pic
    {
    	float: left;
    	height: 200px;
    	width: 200px;
    	border: 1px solid black;
    }
    J'ai trouvé quelques exemples avec la position "absolute" mais ce n'est pas bon pour centrer verticalement à l'intérieur d'un div, si vous pouviez me venir en aide afin d'avoir une présentation plus correcte, je vous en serai reconnaissant.

    Nicolas.

  2. #2
    Membre expérimenté Avatar de onirisme
    Homme Profil pro
    Ingénieur commercial
    Inscrit en
    Novembre 2004
    Messages
    221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur commercial
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Novembre 2004
    Messages : 221
    Par défaut Solution
    Bonjour, je ne sais pas si ça fonctionne sous IE mais c'est bon sous firefox

    Dans la page HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <div id="imgBlock"><!--Déclaration d'une div qui contient l'image-->
            <img id="img" src="img/stylesheet.png" /><!--Déclaration de l'ID de l'image.-->
            </div>
    Ensuite, la partie CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    #imgBlock{
        height :200px ;/*Hauteur et largeur de la div*/
        width : 200px ;
        background-color : #CC3300 ;/*Juste pour vérifier*/
     
        }
     
    #img{    
        position: relative;/*Position relative à la div "imgBlock"*/
         left: 50%; /*Centrage horizontal*/
         top: 50%;
         width: 128px;/*Taille de l'image. Facultatif mais utile pour avoir des images
                       de la même taille*/
         height: 128px;
         margin-top: -64px; /* moitié de la hauteur */
         margin-left: -64px; /* moitié de la largeur */
     
         }
    Résultat :
    Voilà...
    Steve

  3. #3
    Membre Expert

    Homme Profil pro
    Expert PHP
    Inscrit en
    Novembre 2004
    Messages
    2 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Expert PHP
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2004
    Messages : 2 127
    Par défaut
    Mais je sais pas si Nikoalas à des images à tailles fixes ...

  4. #4
    Membre averti
    Inscrit en
    Mai 2007
    Messages
    13
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 13
    Par défaut
    Citation Envoyé par Maxoo Voir le message
    Mais je sais pas si Nikoalas à des images à tailles fixes ...
    Touché ! Les images ne sont pas en taille fixe, elles sont redimensionnées pour faire au maximum 200px sur la longueur mais la longueur peut être verticale (ce qui n'est pas un problème puisque le centrage horizontal fonctionne) mais la longueur peut aussi être horizontale là, mon image va se placer en haut du div laissant un espace blanc en dessous et c'est assez peu harmonieux.

    Merci tout de même pour l'idée... et si y en a d'autres, je suis preneur.

  5. #5
    Membre expérimenté Avatar de onirisme
    Homme Profil pro
    Ingénieur commercial
    Inscrit en
    Novembre 2004
    Messages
    221
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur commercial
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Novembre 2004
    Messages : 221
    Par défaut
    Dans ce cas essaye d'utiliser :
    display: table-cell;

    Exemple qui marche chez moi sous FF :
    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    .contener {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 300px;
        height: 300px;
        background-color : #CC3300 ;
        margin-right : 0px;
    }
    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div class="contener"><img src="pomme.jpg" alt="Image2"></div>
    Le résultat : http://onirisme.free.fr/dvp/imageCentree/
    A priori je ne vois pas d'autre solution si ce n'est d'utiliser directement des tableaux...
    Steve

  6. #6
    Membre averti
    Inscrit en
    Mai 2007
    Messages
    13
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 13
    Par défaut
    Merci, le résultat semble super, c'est exactement ce que je cherchais à faire sauf que, sauf que chez moi ça ne donne pas le même résultat du fait que j'utilise un "float: left;" pour caser mes div sur la gauche...

    Je précise que je n'ai pas trouvé l'utilité du margin-right: 0px; donc je l'ai supprimé, ai-je eu tort de le faire ? Je l'ai fait parce que je ne voyais pas de différence.

    Je vais essayer de trouver mais toute aide est la bienvenue.

    Je mets les deux blocs CSS que je fais :

    Code CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    #gallery
    {
    	height: 606px;
    	width: 606px;
    	margin-left: auto;
    	margin-right: auto;
    	margin-bottom: 20px;
    	border: 2px solid black;
    	padding: 5px;
    }
     
    #gallery pic
    {
    	float: left;
            width: 200px;
            height: 200px;
    }
     
    .center
    {
    	display: table-cell;
            vertical-align: middle;
    	text-align: center;
            width: 200px;
            height: 200px;
    	border: 1px solid black;
    }
    Code HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div id="gallery">
    <div class="center"><img src="cuba2.jpg"></div>
    <div class="center"><img src="cuba.jpg"></div>
    <div class="center"><img src="cuba2.jpg"></div>
    <div class="center"><img src="cuba.jpg"></div>
    </div>
    Le problème n'en est pas un quand le nombre de photo est inférieur à 4 mais dès qu'il atteint quatre, on voit le problème. Avant je mettais mes photos dans les "<pic></pic>" ce qui faisait que je pouvais avoir 9 photos bien disposées mais pas centrée dans le div... et maintenant qu'elles sont centrées, je ne sais pas comment les mettre à l'intérieur du <pic>.

    En espérant avoir été clair,
    Nicolas.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Alignement vertical dans un div (img + texte) marche pas !
    Par MuLog dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 02/02/2011, 11h57
  2. centrage vertical dans un div
    Par Mangacker dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 07/07/2008, 16h55
  3. centrage vertical dans une DIV
    Par jpean.net dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/12/2007, 07h47
  4. Centrage vertical d'un DIV dynamique
    Par thegreatbato dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/06/2007, 19h05
  5. [HTML] Centrage vertical d'un div
    Par LE NEINDRE dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 25/08/2005, 17h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo