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

 

  1. #1
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    août 2008
    Messages
    837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : août 2008
    Messages : 837
    Points : 710
    Points
    710

    Par défaut Centrage verticalement sur une div avec flex

    Bonjour

    Voici mon code.

    Code html : 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
    28
    29
    <style type="text/css">
    html{font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;font-size:13px;color: black }
    a{text-decoration: none; color: black}
    a:hover{text-decoration: none;color: #0072c6;}
    .decors_letter{
        font-size: 20px;color:white;width: 20%;background-color:#0072c6;text-align:center;vertical-align : middle;
    }
    .flex-container {
        display: flex;
        box-shadow: 1px 1px 1px 1px #C0C0C0;overflow: hidden;
        <!-- border-radius: 10px 100px / 120px; -->
    }
    .flex-link{
        padding-left:10%;
        color:#0072c6;
    }
    </style>
    </head>
    <body>
    <div class="flex-container">
        <div class="decors_letter">A</div>
        <div class="flex-link">
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
    </div>
    </div>

    Je n'arrive pas à inscrire dans "flex-container", le fait pour ses enfants "decors_letter" et "flex-link" d'être centrés verticalement.

    Merci d'avance pour votre aide.
    _____________________________________________
    Tours Football Club - Turonorum Civitas Libera

    Content pas content de ma réponse? N'hésitez pas votez !!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 814
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 814
    Points : 30 345
    Points
    30 345

    Par défaut

    Bonjour,
    met un align-items: center sur ton conteneur « flex » ou encore un margin:auto sur les enfants directs du conteneur.

  3. #3
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    août 2008
    Messages
    837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : août 2008
    Messages : 837
    Points : 710
    Points
    710

    Par défaut

    J'ai un peu retravaillé mon 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
     
    <style type="text/css">
    html{font-family:"Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;font-size:13px;color: black }
    a{text-decoration: none; color: black}
    a:hover{text-decoration: none;color: #0072c6;}
     
    .flex-container {
    	display: flex;
    	box-shadow: 1px 1px 1px 1px #C0C0C0;
        align-items: center;
    }
    .flex-link{
    	color:#0072c6;flex: 5;padding-left:10px;
    }
    .decors_letter{
    	font-size: 20px;color:white;background-color:#0072c6;text-align:center;flex: 1;
    }
    </style>
    HTML:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <div class="flex-container">
        <div class="decors_letter">A</div>
        <div class="flex-link">
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
            <a href="#"</a>ligne</br>
        </div>
    </div>

    Ce que je n'arrive pas à faire, c'est d'indiquer à "decors_letter" de prendre toute la place nécessaire en hauteur que lui en accorde son père.
    En gros, je ne sais pas comment faire pour que les deux frères "decors_letter" et "flex-link" soit aussi haut l'un que l'autre.

    Merci d'avance.
    _____________________________________________
    Tours Football Club - Turonorum Civitas Libera

    Content pas content de ma réponse? N'hésitez pas votez !!

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    août 2008
    Messages
    837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : août 2008
    Messages : 837
    Points : 710
    Points
    710

    Par défaut

    Bonjour

    Merci pour ta réponse.
    J'ai effectué la modification, mais du coup le texte dans "decors_letter" n'est plus aligné verticalement.
    _____________________________________________
    Tours Football Club - Turonorum Civitas Libera

    Content pas content de ma réponse? N'hésitez pas votez !!

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    13 036
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 13 036
    Points : 26 549
    Points
    26 549

    Par défaut

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .decors_letter{
       ...
       flex:1; 
      display:flex; align-items:center; justify-content:center;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    août 2008
    Messages
    837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : août 2008
    Messages : 837
    Points : 710
    Points
    710

    Par défaut

    Merci pour ta réponse.

    Maintenant pour ne pas être bête : pourquoi flex sur le fils?
    Je croyais qu'il fallait juste le mettre sur le père?
    _____________________________________________
    Tours Football Club - Turonorum Civitas Libera

    Content pas content de ma réponse? N'hésitez pas votez !!

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 814
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 814
    Points : 30 345
    Points
    30 345

    Par défaut

    Mettre un enfant en « flex » va te permettre de lui conférer un comportement de boîte « flex » qui permet ainsi de centrer son contenu et ainsi de suite ...

    Dans ton cas, si le code HTML est complet, il n'est peut être pas utile d'avoir recourt aux « flexBox », en aujoutant des éléments inutiles, un modèle de boîte « table-xxx » devrait suffire.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .flex-container {
      display: table;
      width: 100%;  
    }
    .flex-container > div {
      display: table-cell;
      vertical-align: middle;
    }
    Si tu tiens à tout prix a utiliser un modèle de boîte « flexBox » tu peux alors jouer avec un background de 20% de large.

  9. #9
    Membre éclairé Avatar de ledisciple
    Homme Profil pro
    observateur de nuage niveau 2.3
    Inscrit en
    août 2008
    Messages
    837
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 33
    Localisation : France

    Informations professionnelles :
    Activité : observateur de nuage niveau 2.3

    Informations forums :
    Inscription : août 2008
    Messages : 837
    Points : 710
    Points
    710

    Par défaut

    Citation Envoyé par NoSmoking Voir le message
    Dans ton cas, si le code HTML est complet
    Non, il ne l'était pas ! J'en ai beaucoup d'autres boites après!
    Merci pour ta réponse.
    _____________________________________________
    Tours Football Club - Turonorum Civitas Libera

    Content pas content de ma réponse? N'hésitez pas votez !!

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

Discussions similaires

  1. Focus sur une div avec position dynamique
    Par rider73 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/11/2015, 16h44
  2. Problème de centrage verticale dans une div
    Par stefsas dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/05/2010, 19h15
  3. [Débutant] Aligner deux divs sur une ligne avec inline
    Par Braz dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/03/2006, 10h52
  4. Problème sur une cmd avec AWK
    Par OrangeBud dans le forum Linux
    Réponses: 3
    Dernier message: 02/06/2004, 10h51
  5. Erreur sur une fonction avec des paramètres
    Par Elois dans le forum PostgreSQL
    Réponses: 2
    Dernier message: 05/05/2004, 21h00

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