≡

Bilan de compétences sous forme de Quiz

Le centrage en CSS

Liste des Tuto

Le centrage CSS

Liste des compétences

Le centrage horizontal
Le centrage vertical

Faire le Quiz Voir le Corrigé

Liste des compétences et des tests

Le centrage horizontal

Ecrire la déclaration CSS nécessaire pour centrer horizontalement ce conteneur de type block ? (Prendre 0 pour les marges haute et basse)

<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color:#cbd285; } #el-type-block { background-color: #f3e472; border: 2px solid black; width: 300px; padding: 1em; /* Déclaration à placer ici */ } </style> </head> <body> <div id='el-type-block'>Elément de type block</div> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la déclaration CSS nécessaire pour centrer horizontalement le contenu de ce conteneur ?

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Ecrire la déclaration CSS nécessaire pour centrer horizontalement l'image dans ce conteneur ?

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Le centrage vertical

Choisir une réponse (280)

Vous voulez centrer verticalement ce texte dans son conteneur. Pensez vous que la déclaration vertical-align:middle; soit suffisante ?

<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color:#cbd285; } #el-type-block { background-color: #f3e472; border: 2px solid black; width: 500px; height: 200px; padding: 1em; /* Déclaration à placer ici */ } </style> </head> <body> <div id='el-type-block'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae quos in molestias ratione! Fugiat sequi asperiores reprehenderit voluptas autem.</div> </body> </html>

Oui.

Non.

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Quelle déclaration faut-il ajouter pour centrer verticalement ce texte dans son conteneur ?

<!DOCTYPE html> <html> <head> <meta charset= "utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background-color:#cbd285; } #el-type-block { background-color: #f3e472; border: 2px solid black; width: 500px; height: 200px; padding: 1em; vertical-align:middle; /* Déclaration à placer ici */ } </style> </head> <body> <div id='el-type-block'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad recusandae quos in molestias ratione! Fugiat sequi asperiores reprehenderit voluptas autem.</div> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Quelle déclaration faut-il ajouter pour centrer verticalement ce texte dans son conteneur sachant que la hauteur du conteneur fait 150px ?

<!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <style> body { background-color:#cbd285; } div#conteneur { background-color: #f3e472; width: 300px; height: 150px; } div#conteneur p { /* Déclaration a ajouter ici */ } </style> </head> <body> <div id='conteneur'> <p>Texte dans un conteneur</p> </div> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Quelle déclaration faut-il ajouter pour centrer horizontalement et verticalement le bloc orange dans le bloc jaune ?

<!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <style> body { background-color:#cbd285; } div#conteneur { width: 300px; height: 300px; background-color: #f3e472; display: flex; /* FLEXBOX */ } div#box { width:150px; height:150px; background-color: orange; /* Déclaration a ajouter ici */ } </style> </head> <body> <div id='conteneur'> <div id='box'>Un block centré</div> </div> </body> </html>

Vous devez choisir une réponse

Ceci est une présentation du quiz. Pour faire ce quiz avec toutes les fonctionnalités et mémoriser vos résultats cliquez sur Aller au Quiz

Politique de confidentialité

Mentions Légales