Centrer des DIV sur une ligne

**labarre2002** · 25/09/2022, 10h26

BOnjour

Je realise la page suivante
Nom : baba.jpg
Affichages : 400
Taille : 191,9 Ko

le souci est que j ai du mal a centrer la div contenant les deux images
ci dessous mon fichier HTML ET CSS

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="fr">
    <head>
 
<meta charset="utf-8">
<meta names="keywords" content="e-commerce,informatique,processeur">
<link rel="stylesheet" href="style.css">
<title>B.A.B.A</title>
 
    </head>
 
<body>
 
 
<main  class="container">
 
 
    <section class="items">
 
        <h1 class="title">Profiter des promotions de Paques</h1>
 
        <div class="pictures">
 
            <img src="images/radeon.jpg" alt="Processeur RADEON" width="360"  height="360">
            <p>Découvrez les tout derniers processeur graphiques<br> 
                Intel Arc Pro série A pour stations de travail</p>
      <a href="https://www.amd.com/fr"  target="_blank" rel="noreferrer"  rel="noopener">Entrez</a>
 
        </div>
 
        <div class="pictures">
            <img src="images/intel.jpg" alt="Processeur Intel" width="360"  height="360">
            <p>Présentation de la Série AMD Ryzen  7000.<br>
               Le processeur pour PC de bureau le plus avancé<br> 
               pour les gamers et les créateurs
                </p>
            <a href="https://www.intel.fr/content/www/fr/fr/homepage.html" target="_blank" rel="noreferrer"  rel="noopener">Entrez</a>
 
              </div>
 
    </section>
 
 
 
 
 
 
 
</main>
 
<footer>
 
    <p class="pied">&copy;Copyright*Pat66**2002</p>
</footer>
 
 
</body>
 
</html>

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
*,::before,::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{
 
    height: 100%;
}
 
 
 
body{
 
    font-family:verdana,helvetica;
    background-color: #FFBCC1;
 
    font-size: 1em;
    display: flex;
   flex-direction: column;
 
 
}
 
 
.container{
    flex-grow:1;
}
 
 
 
.items{
 
 
 
}
 
.title{
    text-align: center;
}
 
.pictures{
    display:table-cell;
}
 
 
 
a:link{
 
    color:white;
}
 
a:visited{
    color:royalblue;
 
}
a:hover{
    background-color: blueviolet;
    font-style:italic;
 
 
}
a:active{
    color:#00BFFF;
}
 
 
a{
    text-decoration: none;
 
}
 
 
.pied{
 
    padding: 10px;
    text-align:right;
    font-size:85%;
    font-style:italic;
  }

J ai essaye

Code :

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

1
2
justify-content:center;
align-items:center;

sur items mais rien n y fait
Pourrais avoir des elements de reponse ?
Merci.

**NoSmoking** · 29/09/2022, 11h04

Bonjour,
les propriétés justify-content, align-items ne sont prises en compte que si l'élément sur lequel elles s'appliquent est en display:flex/inline-flex, donc que cela ne fonctionne pas n'a rien de surprenant !

Pour arriver à tes fins il te faut déjà modifier ta structure HTML pour mettre un conteneur autour de tes deux éléments.

Code html :

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

1
2
3
4
<div class="center-container">
  <div class="pictures"></div>
  <div class="pictures"></div>
</div>

Il serait peut être souhaitable, dans ton cas, d'utiliser des éléments <figure> ce qui pourrait ressembler à :

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
<div class="center-container">
  <figure>
    <img src="..." alt="...">
    <figcaption>
      <p>ton texte...
      <p><a href="...">Entrez</a>
    </figcaption>
 
  </figure>
  <figure>
    <img src="..." alt="...">
    <figcaption>
      <p>ton texte...
      <p><a href="...">Entrez</a>
    </figcaption>
  </figure>
</div>

Concernant le centrage on pourra utiliser :

Code :

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

1
2
3
4
5
6
7
8
9
.center-container {
  display: flex;                  /* mmode flexible */
  max-inline-size: max-content;   /* s'ajuste au contenu */
  margin-inline: auto;            /* centrage par rapport au parent */
}
figure {
  margin: .5em;                   /* à ajuster il va de soit ! */
  max-inline-size: min-content;   /* s'ajuste aux images */
}

Voilà une façon de procéder, aux adaptations prêtes, tu ne devrais pas être loin de ce que tu cherches à faire.