diff options
Diffstat (limited to 'files/fr/web/html/element/center/index.html')
| -rw-r--r-- | files/fr/web/html/element/center/index.html | 90 |
1 files changed, 34 insertions, 56 deletions
diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html index cd47d48252..5e7bdd54e2 100644 --- a/files/fr/web/html/element/center/index.html +++ b/files/fr/web/html/element/center/index.html @@ -4,94 +4,72 @@ slug: Web/HTML/Element/center tags: - Element - HTML - - Obsolete + - Deprecated - Reference + - Text + - Text Alignment - Web + - alignment + - center translation_of: Web/HTML/Element/center +browser-compat: html.elements.center --- -<div>{{HTMLRef}}{{obsolete_header}}</div> +<div>{{HTMLRef}}</div> -<p>L’élément HTML <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Éléments_en_bloc">élément de type bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément {{HTMLElement("body")}}).</p> - -<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("text-align")}} qui peut être appliqué à l'élément {{HTMLElement("div")}} ou à un élément {{HTMLElement("p")}}. Pour centrer des blocs, on utilisera d'autres propriétés ({{cssxref("margin-left")}} et {{cssxref("margin-right")}} avec la valeur <code>auto</code> par exemple ou <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Utilisation_des_flexbox_en_CSS">les boîtes flexibles</a>).</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> +</div> -<h2 id="Interface_DOM">Interface DOM</h2> +<p class="summary">L'élément <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Block-level_elements">élément de bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>).</p> -<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p> +<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui peut être appliqué à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> ou à un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>. Pour centrer des blocs, on utilisera d'autres propriétés (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> et <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou définissez <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à <code>0 auto</code>).</p> -<div class="note"> -<p><strong>Note d'implémentation :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> -</div> +<h2 id="dom_interface">Interface DOM</h2> -<h2 id="Exemples">Exemples</h2> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> -<h3 id="Premier_exemple_(HTML)">Premier exemple (HTML)</h3> +<div class="notecard note"> + <p><b>Note d'implémentation :</b></p> + <p>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +</div> -<h4 id="HTML">HTML</h4> +<h2 id="example_1">Exemple 1</h2> <pre class="brush: html"><center> Ce texte sera centré. <p>Ainsi que ce paragraphe.</p> -</center> -</pre> +</center></pre> -<h4 id="Résultat">Résultat</h4> +<h2 id="example_2">Exemple 2 (alternative CSS)</h2> -<p>{{EmbedLiveSample("Premier_exemple_(HTML)","200","100")}}</p> - -<h3 id="Deuxième_exemple_(CSS)">Deuxième exemple (CSS)</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div class="centrer"> +<pre class="brush: html"><div style="text-align:center"> Ce texte sera centré. <p>Ainsi que ce paragraphe.</p> </div></pre> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.centrer { - text-align: center; -} -</pre> +<h2 id="example_3">Exemple 3 (alternative CSS)</h2> -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Deuxième_exemple_(CSS)","200","100")}}</p> - -<h3 id="Troisième_exemple_(CSS)">Troisième exemple (CSS)</h3> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><p class="centrer"> +<pre class="brush: html"><p style="text-align:center"> Cette ligne sera centrée.<br> Ainsi que cette ligne. </p></pre> -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.centrer { - text-align: center; -} -</pre> - -<h4 id="Résultat_3">Résultat</h4> - -<p>{{EmbedLiveSample("Troisième_exemple_(CSS)","200","100")}}</p> +<h2 id="notes">Notes</h2> -<h2 id="Notes">Notes</h2> +<p>Appliquer <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a><code>: center</code> sur un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a> ou <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p> -<p>Appliquer {{cssxref("text-align")}}<code>: center</code> sur un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}} centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.center")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{cssxref("text-align")}}</li> - <li>{{cssxref("display")}}</li> + <li>La propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li> + <li>La propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a></li> </ul> |