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>
<!-- 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="/abstract-data-types" 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/cpp-data-types/67/abstract-data-types.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Types de données abstraits" 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="/abstract-data-types">Types de données abstraits </a>
</h4>
</div> <div class="group">
<a href="/synchronous-motor" 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/43/synchronous-motor.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Moteur synchrone" 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="/synchronous-motor">Moteur synchrone </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="/immutable-string-java">
<img src="https://techcodeview.com/img/java-string/47/immutable-string-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Chaîne immuable en Java" 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="/immutable-string-java" class="hover:text-tech-500 transition-colors line-clamp-3">Chaîne immuable en Java </a>
</h4>
</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="/best-clt-practice-tests-131634">
<img src="https://techcodeview.com/img/blog/35/best-clt-practice-tests.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les meilleurs tests pratiques CLT : un guide expert" 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="/best-clt-practice-tests-131634" class="hover:text-tech-500 transition-colors line-clamp-3">Les meilleurs tests pratiques CLT : un guide expert </a>
</h4>
</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="/explained-what-is-sarahah-24296">
<img src="https://techcodeview.com/img/get-informed/92/explained-what-is-sarahah.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Expliqué : Qu’est-ce que Sarahah ?" 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="/explained-what-is-sarahah-24296" class="hover:text-tech-500 transition-colors line-clamp-3">Expliqué : Qu’est-ce que Sarahah ? </a>
</h4>
</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="/sat-score-gpa-conversion-table-1311434">
<img src="https://techcodeview.com/img/blog/04/sat-score-gpa-conversion-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tableau de conversion du score SAT en GPA" 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="/sat-score-gpa-conversion-table-1311434" class="hover:text-tech-500 transition-colors line-clamp-3">Tableau de conversion du score SAT en GPA </a>
</h4>
</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="/gcc-linux">
<img src="https://techcodeview.com/img/linux-tutorial/07/gcc-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux du CCG" 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="/gcc-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Linux du CCG </a>
</h4>
</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="/5-excellent-reasons-not-fear-garden-spider-131500">
<img src="https://techcodeview.com/img/blog/33/5-excellent-reasons-not-fear-garden-spider.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="5 excellentes raisons de ne pas craindre l’araignée des jardins" 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="/5-excellent-reasons-not-fear-garden-spider-131500" class="hover:text-tech-500 transition-colors line-clamp-3">5 excellentes raisons de ne pas craindre l’araignée des jardins </a>
</h4>
</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="/best-college-essay-length-131348">
<img src="https://techcodeview.com/img/blog/36/best-college-essay-length.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="La meilleure durée de dissertation universitaire : quelle devrait-elle être ?" 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="/best-college-essay-length-131348" class="hover:text-tech-500 transition-colors line-clamp-3">La meilleure durée de dissertation universitaire : quelle devrait-elle être ? </a>
</h4>
</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="/foreign-key-dbms">
<img src="https://techcodeview.com/img/dbms-tutorial/35/foreign-key-dbms.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Clé étrangère dans le SGBD" 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="/foreign-key-dbms" class="hover:text-tech-500 transition-colors line-clamp-3">Clé étrangère dans le SGBD </a>
</h4>
</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="/recon-ng-information-gathering-tool-kali-linux">
<img src="https://techcodeview.com/img/kali-linux-tutorial/52/recon-ng-information-gathering-tool-kali-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Outil de collecte d'informations de reconnaissance dans Kali Linux" 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="/recon-ng-information-gathering-tool-kali-linux" class="hover:text-tech-500 transition-colors line-clamp-3">Outil de collecte d'informations de reconnaissance dans Kali Linux </a>
</h4>
</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="/difference-between-big-o-vs-big-theta-vs-big-omega-notations">
<img src="https://techcodeview.com/img/it-problems-solutions/79/difference-between-big-o-vs-big-theta-vs-big-omega-notations.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Différence entre les notations Big O, Big Theta Θ et Big Omega Ω" 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="/difference-between-big-o-vs-big-theta-vs-big-omega-notations" class="hover:text-tech-500 transition-colors line-clamp-3">Différence entre les notations Big O, Big Theta Θ et Big Omega Ω </a>
</h4>
</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/kali-linux-tutorial/32/top-5-tools-sniffing.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Top 5 des outils de reniflage et d'usurpation d'identité" 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="/kali-linux-tutorial/">Tutoriel Kali Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/top-5-tools-sniffing">Top 5 des outils de reniflage et d'usurpation d'identité </a> </h4>
</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/computer/55/how-open-windows-my-documents.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment ouvrir le dossier Windows Mes documents ou Documents ?" 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="/computer/">Ordinateur </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-open-windows-my-documents">Comment ouvrir le dossier Windows Mes documents ou Documents ? </a> </h4>
</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/kali-linux-tutorial/95/kali-linux-terminal.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kali Linux-Terminal" 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="/kali-linux-tutorial/">Tutoriel Kali Linux </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/kali-linux-terminal">Kali Linux-Terminal </a> </h4>
</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/sql-clauses-operators/95/sql-merge-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Instruction SQL MERGE" 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="/sql-clauses-operators/">Opérateurs De Clauses Sql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sql-merge-statement">Instruction SQL MERGE </a> </h4>
</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/php-tutorial/47/php-foreach-loop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Boucle foreach PHP" 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="/php-tutorial/">Tutoriel Php </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/php-foreach-loop">Boucle foreach PHP </a> </h4>
</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/summary/31/desiderata-poem-summary.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Désiré-poème-résumé" 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="/summary/">Résumé </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/desiderata-poem-summary">Désiré-poème-résumé </a> </h4>
</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/sl/">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>