Exercice 4/6

  • Dans le fichier stylesheet.css, ajouter une largeur (width) de 200px au sélecteur a
  • Dans le fichier stylesheet.css, ajoutez les propriétés margin-left et margin-right au sélecteur a et mettez la valeur auto pour chacune d'elles. Cela permet de centrer horizontalement le bouton dans la page à partir de sa largeur width;
  • Dans le fichier stylesheet.css, ajoutez la propriété text-align: center au sélecteur a. Cela permet de centrer horizontalement le texte du bouton;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 4/6

L'objectif de cet exercice est de positionner le bouton.

Nous approfondirons le positionnement dans les exercices à venir mais voici quelques explications pour la compréhension de cet exercice :

  • Quand on applique la valeur auto aux marges externes (margin) gauche et droite, cela permet de centrer horizontalement un élément HTML.
  • text-align: center est le code qui permet de centrer horizontalement du contenu textuel;

Commentaires les mieux notés

  • pizzutoandrea3

    help

  • mram Administrateur

    Vous n'avez pas mis tout ce qui est demandé .....

  • ceciliaricarte83-100

    Bonjour, message erreur : Erreur dans le fichier stylesheet.css : undefined:2:72: property missing ':' aidez moi svp

  • willyboutete-44

    ça beug ?

7 Commentaires

  • pizzutoandrea3

    pizzutoandrea3

    help

    le 28/05/2017 à 22h18

  • mram

    mram Administrateur

    Vous n'avez pas mis tout ce qui est demandé .....

    le 01/06/2017 à 16h12

  • extan

    extan

    Pourquoi ne pas ffaire un simpe "margin: auto" ?

    le 12/07/2017 à 10h31

  • mram

    mram Administrateur

    Bonjour, parce que ça va aussi mettre "auto" sur les marges en haut et en bas et on ne le souhaite pas forcément, même si dans le cas de cet exercice ça ne gêne pas. Il faut préférer ceci : margin: 0 auto. La première valeur est pour les marges haute et basse.

    le 16/07/2017 à 10h31

  • loubna.bali-41

    loubna.bali-41

    a { display:block; border: 1px solid #0066ff; width: 200px; margin-left:auto; margin-right:auto; text-align:center; }

    le 08/02/2019 à 17h02

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Positionnez votre bouton</title> </head> <body> <a href="http://3wa.fr">Cliquez ici</a> </body> </html>
a { display: block; border: 1px solid #0066ff; }