Comment centrer du texte (horizontalement et verticalement) à l'intérieur d'un bloc div en CSS ?
Centrer le texte horizontalement et verticalement à l'intérieur d'un bloc div est important pour créer des mises en page visuellement attrayantes. Diverses méthodes, telles que les transformations flexbox, grille et CSS, offrent des solutions présentant des avantages et des inconvénients distincts. Cet article examine ces approches courantes pour réaliser le centrage du texte dans les blocs div.
Table des matières
- Utiliser Flexbox
- Utiliser la grille
- Utilisation de l'alignement du texte
- Utiliser une cellule de tableau
- Utilisation de la propriété Transform
Utilisation de Flexbox :
- Définissez le conteneur parent sur affichage : flexible ; Cela permet d'utiliser un boîte flexible et transforme le conteneur parent en conteneur flexible.
- Utiliser justifier-contenu : centre pour centrer l'élément enfant horizontalement dans le conteneur parent.
- Utiliser aligner les éléments : centre pour centrer l'élément enfant verticalement dans le conteneur parent.
Exemple: Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la propriété flexbox de CSS .
HTML
Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div> <style>corps { texte-align : centre ; } .container { hauteur : 300 px ; largeur : 645 px ; affichage : flexible ; justifier-contenu : centre ; align-items : centre ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-grid'> <span>Utiliser la grille </span> </h2> <ul> <li value='1'> <span>Grille CSS </span> <span>est un autre outil de mise en page populaire qui vous permet de créer des mises en page complexes et flexibles basées sur une grille. </span> </li> <li value='2'> <span>Définissez le conteneur parent sur </span> <b> <strong>affichage : grille </strong> </b> <span>. Cela permet d'utiliser une grille CSS et transforme le conteneur parent en conteneur de grille. </span> </li> <li value='3'> <span>Utilisez le </span> <b> <strong> </strong> </b> <b> <strong>éléments de lieu : centre </strong> </b> <span>propriété pour centrer l’élément enfant horizontalement et verticalement dans la cellule de la grille. Cette propriété est un raccourci pour les deux </span> <b> <strong>justifier les éléments </strong> </b> <span>et </span> <b> <strong>aligner les éléments </strong> </b> <span>. </span> </li> </ul> <p dir='ltr'> <b> <strong>Exemple: </strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la propriété grid de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div> <style>.conteneur { hauteur : 300 px ; largeur : 645 px ; affichage : grille ; éléments de lieu : centre ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-text-align'> <b> <strong>Utilisation de l'alignement du texte : </strong> </b> </h2> <ul> <li value='1'> <span>Le </span> <span>aligner le texte </span> <span>La propriété est un moyen simple et direct de centrer le texte horizontalement dans un bloc div. </span> </li> <li value='2'> <span>Définissez le conteneur parent sur </span> <b> <strong>alignement du texte : centre. </strong> </b> <span>Cela centre l'élément enfant horizontalement dans le conteneur parent. </span> </li> <li value='3'> <span>Utiliser </span> <b> <strong>hauteur de la ligne: </strong> </b> <span>pour centrer l'élément enfant verticalement dans le conteneur parent. La valeur de doit être égale à la hauteur du conteneur parent. </span> </li> </ul> <p dir='ltr'> <b> <strong>Exemple: </strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div en utilisant l'alignement du texte de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div> <style>.conteneur { hauteur : 300 px ; largeur : 645 px ; alignement du texte : centre ; hauteur de ligne : 400 px ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-table-cell'> <span>Utiliser une cellule de tableau </span> </h2> <ul> <li value='1'> <span>Définissez le conteneur parent sur </span> <b> <strong>affichage : tableau. </strong> </b> <span>Cela émule le comportement d’une table. </span> </li> <li value='2'> <span>Définissez l'élément enfant sur </span> <b> <strong>affichage : tableau-cellule </strong> </b> <span>. Cela émule le comportement d’une cellule de tableau. </span> </li> <li value='3'> <span>Utiliser </span> <b> <strong>alignement vertical : milieu </strong> </b> <span>pour centrer l'élément enfant verticalement dans le conteneur parent. </span> </li> <li value='4'> <span>Utiliser </span> <b> <strong>alignement du texte : centre </strong> </b> <span>pour centrer l'élément enfant horizontalement dans le conteneur parent. </span> </li> </ul> <p dir='ltr'> <b> <strong>Exemple: </strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la cellule de tableau de texte CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div> <style>.conteneur { hauteur : 300 px ; largeur : 645 px ; affichage : cellule de tableau ; alignement du texte : centre ; alignement vertical : milieu ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-transform-property'> <span>Utilisation de la propriété Transform : </span> </h2> <ul> <li value='1'> <span>Définissez le conteneur parent sur </span> <b> <strong>position : relative. </strong> </b> <span>Cela permet d'utiliser un positionnement absolu pour l'élément enfant. </span> </li> <li value='2'> <span>Définissez l'élément enfant sur </span> <b> <strong>position : absolue. </strong> </b> <span>Cela permet d'utiliser un positionnement absolu pour l'élément enfant. </span> </li> <li value='3'> <span>Définir l'élément enfant </span> <b> <strong>haut </strong> </b> <span>et </span> <b> <strong>gauche </strong> </b> <span>propriétés à </span> <b> <strong>cinquante% </strong> </b> <span>. Cela positionne l'élément enfant au centre du conteneur parent. </span> </li> <li value='4'> <span>Utiliser </span> <b> <strong>transformer : traduire (-50 %, -50 %) </strong> </b> <span>pour centrer l'élément enfant à la fois horizontalement et verticalement. </span> </li> </ul> <p dir='ltr'> <b> <strong>Exemple: </strong> </b> <span>Cet exemple montre comment centrer le texte dans un div à l'aide de la propriété transform de CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div> <style>.conteneur { hauteur : 300 px ; largeur : 645 px ; position : relative ; bordure : 2px noir uni ; } h1 { position : absolue ; haut : 50 % ; la couleur verte; gauche : 50 % ; transformer : traduire (-50 %, -50 %); } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html> </pre> </code> <p dir='ltr'> <b> <strong>Sortir: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <p dir='ltr'> <span>En résumé, l'approche choisie dépendra du cas d'utilisation spécifique, de la compatibilité avec d'autres éléments et de l'esthétique de conception souhaitée. Avec ces méthodes, il est possible d’obtenir un bloc de texte centré dans une variété de mises en page et de conceptions. </span> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Comment centrer du texte (horizontalement et verticalement) à l'intérieur d'un bloc div en CSS ?&url=https://www.techcodeview.com/how-center-text-horizontally"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/how-center-text-horizontally"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/how-center-text-horizontally&title=Comment centrer du texte (horizontalement et verticalement) à l'intérieur d'un bloc div en CSS ?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/bash-scripting-how-check-if-file-exists" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/bash-script/94/bash-scripting-how-check-if-file-exists.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Bash Scripting – Comment vérifier si le fichier existe" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/bash-scripting-how-check-if-file-exists">Bash Scripting – Comment vérifier si le fichier existe </a>
</h4>
</div> <div class="group">
<a href="/act-full-fees-registration-1311310" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/blog/84/act-full-fees-registration.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Frais complets et inscription de l'ACT : quel est le coût total de l'ACT ?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/act-full-fees-registration-1311310">Frais complets et inscription de l'ACT : quel est le coût total de l'ACT ? </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Articles </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-convert-uppercase-lowercase-microsoft-word-document">
<img src="https://techcodeview.com/img/ms-word-tutorial/69/how-convert-uppercase-lowercase-microsoft-word-document.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment convertir les majuscules en minuscules dans un document Microsoft Word" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-convert-uppercase-lowercase-microsoft-word-document" class="hover:text-tech-500 transition-colors line-clamp-3">Comment convertir les majuscules en minuscules dans un document Microsoft Word </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/examples-nfa">
<img src="https://techcodeview.com/img/automata-tutorial/13/examples-nfa.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Exemples de NFA" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/examples-nfa" class="hover:text-tech-500 transition-colors line-clamp-3">Exemples de NFA </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/git-vs-svn">
<img src="https://techcodeview.com/img/git-tutorial/16/git-vs-svn.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Git contre SVN" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/git-vs-svn" class="hover:text-tech-500 transition-colors line-clamp-3">Git contre SVN </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/rand-srand-c">
<img src="https://techcodeview.com/img/cpp-library/68/rand-srand-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="rand() et srand() en C++" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/rand-srand-c" class="hover:text-tech-500 transition-colors line-clamp-3">rand() et srand() en C++ </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/how-address-resolution-protocol-works">
<img src="https://techcodeview.com/img/it-problems-solutions/40/how-address-resolution-protocol-works.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment fonctionne le protocole de résolution d'adresses (ARP) ?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/how-address-resolution-protocol-works" class="hover:text-tech-500 transition-colors line-clamp-3">Comment fonctionne le protocole de résolution d'adresses (ARP) ? </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sql-left-outer-join-vs-left-join">
<img src="https://techcodeview.com/img/picked/13/sql-left-outer-join-vs-left-join.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Jointure externe gauche SQL vs jointure gauche" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sql-left-outer-join-vs-left-join" class="hover:text-tech-500 transition-colors line-clamp-3">Jointure externe gauche SQL vs jointure gauche </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/working-with-excel-files-using-pandas">
<img src="https://techcodeview.com/img/python-pandas/47/working-with-excel-files-using-pandas.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Travailler avec des fichiers Excel à l'aide de Pandas" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/working-with-excel-files-using-pandas" class="hover:text-tech-500 transition-colors line-clamp-3">Travailler avec des fichiers Excel à l'aide de Pandas </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/7-strong-acids-131784">
<img src="https://techcodeview.com/img/blog/77/7-strong-acids.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 7 acides forts" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/7-strong-acids-131784" class="hover:text-tech-500 transition-colors line-clamp-3">Les 7 acides forts </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ps1-emulators-android">
<img src="https://techcodeview.com/img/android-tutorial/36/ps1-emulators-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Émulateurs PS1 pour Android" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ps1-emulators-android" class="hover:text-tech-500 transition-colors line-clamp-3">Émulateurs PS1 pour Android </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sequence-diagrams-unified-modeling-language">
<img src="https://techcodeview.com/img/uml/12/sequence-diagrams-unified-modeling-language.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diagrammes de séquence | Langage de modélisation unifié (UML)" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sequence-diagrams-unified-modeling-language" class="hover:text-tech-500 transition-colors line-clamp-3">Diagrammes de séquence | Langage de modélisation unifié (UML) </a>
</h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversion Java
</a> <a href="/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Mathématiques
</a> <a href="/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Collections Java
</a> <a href="/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Différences
</a> <a href="/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Chaîne Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Des Articles Intéressants </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/57/how-address-an-envelope-photos-included.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment adresser une enveloppe (photos incluses !)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-address-an-envelope-photos-included-1311466">Comment adresser une enveloppe (photos incluses !) </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/c-tutorial/97/how-split-strings-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment diviser des chaînes en C++ ?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/c-tutorial/">Tutoriel C++ </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-split-strings-c">Comment diviser des chaînes en C++ ? </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mathematical/02/time-required-to-meet-in-equilateral-triangle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Temps nécessaire pour se rencontrer dans un triangle équilatéral" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/mathematical/">Mathématique </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/time-required-to-meet-in-equilateral-triangle">Temps nécessaire pour se rencontrer dans un triangle équilatéral </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/70/how-win-gates-scholarship.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment gagner la bourse Gates" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-win-gates-scholarship-131214">Comment gagner la bourse Gates </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/dbms/68/generalization-specialization-and-aggregation-in-er-model.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Généralisation, spécialisation et agrégation dans le modèle ER" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/dbms/">SGBD </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/generalization-specialization-and-aggregation-in-er-model">Généralisation, spécialisation et agrégation dans le modèle ER </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/complexity-analysis/08/time-space-complexity-analysis-merge-sort.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Analyse de la complexité temporelle et spatiale du tri par fusion" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/complexity-analysis/">Analyse De Complexité </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/time-space-complexity-analysis-merge-sort">Analyse de la complexité temporelle et spatiale du tri par fusion </a> </h4>
</div>
</article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/fi/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>