Centrage verticalement sur une div avec flex

Version imprimable

Bonjour

Voici mon code.

Code:

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.

11/07/2018, 10h14
NoSmoking

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

J'ai un peu retravaillé mon code :

CSS :

Code:

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:

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.

11/07/2018, 10h47
Invité
Bonjour,
- A Complete Guide to Flexbox
Code:

align-items: stretch;
11/07/2018, 11h17
ledisciple

Bonjour

Merci pour ta réponse.
J'ai effectué la modification, mais du coup le texte dans "decors_letter" n'est plus aligné verticalement.

Code:

1
2
3
4
5
.decors_letter{
   ...
   flex:1; 
  display:flex; align-items:center; justify-content:center;
}

11/07/2018, 11h54
ledisciple

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?
11/07/2018, 14h43
NoSmoking
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:

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.
11/07/2018, 14h46
ledisciple

Citation:

Envoyé par NoSmoking

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.