Discussion :

[laurentSc]

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

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
<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 css :

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
/* 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 ?

[laurentSc]

J'ai légèrement modifié le post #1 : le schéma souhaité et le code html (les adresses des images sont dorénavant absolues)

https://pasdpanique.fr/

[NoSmoking]

Bonjour,
tout d'abord tu n'as pas besoin de conteneur à ton image :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="certibiocide">
    <img src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">
</div>

pourrait simplement être :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="certibiocide" src="/assets/images/certibiocide.jpg" alt="agréé certibiocide">

ceci étant rien à voir avec un « contexte display:flex » et cela reste du « standard »

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img.certibiocide {
  width: 25%;
  display: block;
  margin: auto;
}

par exemple !