Centrer horizontalement un élément HTML en CSS [HTML]

Soit le code ci-contre d’une nouvelle page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>activité3</title>
</head>
<body>
    <h1>Cours en ligne</h1>
    <div>
        <p>HTML</p>
        <p>Java script</p>
        <ul>
            <li>structure conditionnelle</li>
            <li>structure itérative</li>
        </ul>
    </div>
    <p>Base de données</p>
    <div>
        <p>Système d'exploitation</p>
    </div>
</body>
</html>

Ajouter du CSS pour avoir l’aperçu de la figure suivante:

figure : cours en ligne
Afficher la solution

/*code css*/
body {
    background-color: lightBlue;
}

div {
    /* couleur d'ecriture blanche */
    color: white;
    /* couleur d'arrière plan violet */
    background-color: purple;
    /* largeur de la balise div 80% de son parent (ici body) */
    width: 80%;
    /*centrer les div dans leur élément parent, 0 pour top et bottom, auto pour left et right*/
    margin: 0 auto;
}

Leave a Reply

Your email address will not be published. Required fields are marked *