{"id":1476,"date":"2026-02-16T23:17:01","date_gmt":"2026-02-16T23:17:01","guid":{"rendered":"https:\/\/mytribu.fr\/cmopc\/?p=1476"},"modified":"2026-02-16T23:31:36","modified_gmt":"2026-02-16T23:31:36","slug":"les-conteneurs-div","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/les-conteneurs-div\/","title":{"rendered":"les conteneurs : DIV"},"content":{"rendered":"\n<p>Dans le code HTML :<br> Une <code>&lt;div><\/code> est une <strong>division<\/strong>, c\u2019est-\u00e0-dire un bloc de regroupement.<\/p>\n\n\n\n<p>Elle ne fait rien visuellement par elle-m\u00eame.<br>Elle sert \u00e0 :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>appliquer du CSS \u00e0 un groupe d\u2019\u00e9l\u00e9ments<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>organiser le contenu<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>structurer la page<br><\/li>\n<\/ul>\n\n\n\n<p><strong>A) On centre l&rsquo;image <\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>Image centr\u00e9e avec Flexbox&lt;\/title>\n&lt;style>\n\n\n&lt;\/style>\n        \n&lt;\/head>\n\n&lt;body>\n\n    &lt;div class=\"conteneur\">\n        &lt;img src=\"image.jpg\" alt=\"Mon image\">\n    &lt;\/div>\n\n&lt;\/body>\n\n<\/code><\/pre>\n\n\n\n<p>Le code CSS \u00e0 coller dans le style pour centrer l&rsquo;image<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n    margin: 0;\n    height: 100vh;\n    background-color: black;\n}\n\n.conteneur {\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}<\/code><\/pre>\n\n\n\n<p><strong>B) Centrer un TEXTE dans une DIV<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>Texte centr\u00e9&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n\n&lt;body>\n\n    &lt;div class=\"conteneur\">\n        &lt;div class=\"bloc-texte\">\n            &lt;h1>Bienvenue en CMOPC&lt;\/h1>\n            &lt;p>Nous d\u00e9couvrons aujourd\u2019hui les bases du CSS.&lt;\/p>\n            &lt;p>Nous apprenons \u00e0 structurer une page proprement.&lt;\/p>\n            &lt;p>Et surtout \u00e0 comprendre le r\u00f4le des conteneurs.&lt;\/p>\n        &lt;\/div>\n    &lt;\/div>\n\n&lt;\/body>\n\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>Le code CSS \u00e0 coller dans le style pour centrer l&rsquo;image<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\n    margin: 0;\n}\n\n.conteneur {\n    height: 100vh;\n    background-color: black;\n    color: white;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n\/* Bloc contenant le texte *\/\n.bloc-texte {\n    text-align: center;  \/* Centre le texte horizontalement *\/\n    max-width: 600px;    \/* Limite la largeur pour une meilleure lecture *\/\n}\n\nh1 {\n    font-size: 50px;\n    margin-bottom: 20px;\n}\n\np {\n    font-size: 20px;\n    line-height: 1.6;   \/* Espace entre les lignes *\/\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Dans le code HTML : Une &lt;div> est une division, c\u2019est-\u00e0-dire un bloc de regroupement. Elle ne fait rien visuellement<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1476","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=1476"}],"version-history":[{"count":3,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1476\/revisions"}],"predecessor-version":[{"id":1480,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1476\/revisions\/1480"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=1476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=1476"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=1476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}