les conteneurs : DIV

Publié le par

Dans le code HTML :
Une <div> est une division, c’est-à-dire un bloc de regroupement.

Elle ne fait rien visuellement par elle-même.
Elle sert à :

  • appliquer du CSS à un groupe d’éléments
  • organiser le contenu
  • structurer la page

A) On centre l’image 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Image centrée avec Flexbox</title>
<style>


</style>
        
</head>

<body>

    <div class="conteneur">
        <img src="image.jpg" alt="Mon image">
    </div>

</body>

Le code CSS à coller dans le style pour centrer l’image

body {
    margin: 0;
    height: 100vh;
    background-color: black;
}

.conteneur {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

B) Centrer un TEXTE dans une DIV

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Texte centré</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="conteneur">
        <div class="bloc-texte">
            <h1>Bienvenue en CMOPC</h1>
            <p>Nous découvrons aujourd’hui les bases du CSS.</p>
            <p>Nous apprenons à structurer une page proprement.</p>
            <p>Et surtout à comprendre le rôle des conteneurs.</p>
        </div>
    </div>

</body>

</html>

Le code CSS à coller dans le style pour centrer l’image

body {
    margin: 0;
}

.conteneur {
    height: 100vh;
    background-color: black;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bloc contenant le texte */
.bloc-texte {
    text-align: center;  /* Centre le texte horizontalement */
    max-width: 600px;    /* Limite la largeur pour une meilleure lecture */
}

h1 {
    font-size: 50px;
    margin-bottom: 20px;
}

p {
    font-size: 20px;
    line-height: 1.6;   /* Espace entre les lignes */
}