centrer une image dans un contexte flex
Bonsoir,
je souhaite centrer une image, ce qui est simple à faire dans un cas standard, mais là, non car on est dans contexte display:flex;
En gros, ce que je souhaite faire est cela :
block 1 block 2
image centrée sous le block1
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <section class="propos">
<article>
<h2>Qui sommes-nous ?</h2>
<p>bla bla
</p>
</p>
<div class="certibiocide">
<img src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
</div>
</article>
<img src="/assets/images/Illustration-2-272x300.webp" alt="Illustration d'un agent de désinsectisation">
</section> |
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
| /* Section à propos */
.propos {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.propos p{
color:black;
}
.propos article {
width: 70%;
}
.propos img {
width: 25%;
padding-left: 3rem
}
.propos .certibiocide {
margin:auto;
} |
C'est l'image à la ligne 9 que je souhaite centrer sous le paragraphe "bla bla" et le block 2 de mon schéma ci-dessus est l'image ligne 12.
Malgré ma tentative de classe CSS certibiocide , l'image n'est pas centrée. Comment faudrait-il faire, SVP ?
