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="/maximize-sum-of-n-x-n-upper-left-sub-matrix-from-given-2n-x-2n-matrix" 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/matrix/90/maximize-sum-of-n-x-n-upper-left-sub-matrix-from-given-2n-x-2n-matrix.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Maximiser la somme de la sous-matrice supérieure gauche N X N à partir de la matrice 2N X 2N donnée" 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="/maximize-sum-of-n-x-n-upper-left-sub-matrix-from-given-2n-x-2n-matrix">Maximiser la somme de la sous-matrice supérieure gauche N X N à partir de la matrice 2N X 2N donnée </a>
</h4>
</div> <div class="group">
<a href="/9-things-you-didn-t-know-about-fur-elise-13166" 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/40/9-things-you-didn-t-know-about-fur-elise.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="9 choses que vous ne saviez pas sur Für Elise" 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="/9-things-you-didn-t-know-about-fur-elise-13166">9 choses que vous ne saviez pas sur Für Elise </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="/uc-vs-csu-what-s-difference-131626">
<img src="https://techcodeview.com/img/blog/75/uc-vs-csu-what-s-difference.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="UC contre CSU : quelle est la différence ? Ce qui est mieux?" 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="/uc-vs-csu-what-s-difference-131626" class="hover:text-tech-500 transition-colors line-clamp-3">UC contre CSU : quelle est la différence ? Ce qui est mieux? </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="/python-string-interpolation">
<img src="https://techcodeview.com/img/picked/22/python-string-interpolation.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Interpolation de chaîne Python" 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="/python-string-interpolation" class="hover:text-tech-500 transition-colors line-clamp-3">Interpolation de chaîne Python </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-download-youtube-video-vlc-media-player">
<img src="https://techcodeview.com/img/blog/19/how-download-youtube-video-vlc-media-player.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment télécharger une vidéo YouTube dans VLC Media Player" 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-download-youtube-video-vlc-media-player" class="hover:text-tech-500 transition-colors line-clamp-3">Comment télécharger une vidéo YouTube dans VLC Media Player </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-find-wi-fi-password-using-cmd-windows-11-10">
<img src="https://techcodeview.com/img/command-prompt/43/how-find-wi-fi-password-using-cmd-windows-11-10.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment trouver le mot de passe Wi-Fi à l'aide de CMD sous Windows 11/10 ?" 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-find-wi-fi-password-using-cmd-windows-11-10" class="hover:text-tech-500 transition-colors line-clamp-3">Comment trouver le mot de passe Wi-Fi à l'aide de CMD sous Windows 11/10 ? </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="/what-does-good-letter-recommendation-look-like-1311554">
<img src="https://techcodeview.com/img/blog/70/what-does-good-letter-recommendation-look-like.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="À quoi ressemble une bonne lettre de recommandation ?" 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="/what-does-good-letter-recommendation-look-like-1311554" class="hover:text-tech-500 transition-colors line-clamp-3">À quoi ressemble une bonne lettre de recommandation ? </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="/numpy-log-python">
<img src="https://techcodeview.com/img/numpy-tutorial/27/numpy-log-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="numpy.log() en Python" 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="/numpy-log-python" class="hover:text-tech-500 transition-colors line-clamp-3">numpy.log() en Python </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="/23-types-doctors-131964">
<img src="https://techcodeview.com/img/blog/62/23-types-doctors.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="23 types de médecins et ce qu'ils font" 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="/23-types-doctors-131964" class="hover:text-tech-500 transition-colors line-clamp-3">23 types de médecins et ce qu'ils font </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="/difference-between-alexnet">
<img src="https://techcodeview.com/img/python-tutorial/10/difference-between-alexnet.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Différence entre AlexNet et GoogleNet" 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-alexnet" class="hover:text-tech-500 transition-colors line-clamp-3">Différence entre AlexNet et GoogleNet </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="/toefl-score-range-what-does-it-mean-131152">
<img src="https://techcodeview.com/img/blog/89/toefl-score-range-what-does-it-mean.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Échelle de scores TOEFL : qu’est-ce que cela signifie pour vous ?" 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="/toefl-score-range-what-does-it-mean-131152" class="hover:text-tech-500 transition-colors line-clamp-3">Échelle de scores TOEFL : qu’est-ce que cela signifie pour vous ? </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="/sizeof-operator-c">
<img src="https://techcodeview.com/img/c-tutorial/57/sizeof-operator-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="opérateur sizeof() 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="/sizeof-operator-c" class="hover:text-tech-500 transition-colors line-clamp-3">opérateur sizeof() 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 -->
</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/98/i-e-vs-e-g-vs-ex-which-is-which.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="C'est à dire. contre par ex. vs Ex. : Lequel est lequel ?" 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="/i-e-vs-e-g-vs-ex-which-is-which-131124">C'est à dire. contre par ex. vs Ex. : Lequel est lequel ? </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/artificial-intelligence/03/search-algorithms-artificial-intelligence.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algorithmes de recherche en intelligence artificielle" 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="/artificial-intelligence/">Intelligence Artificielle </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/search-algorithms-artificial-intelligence">Algorithmes de recherche en intelligence artificielle </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/bash-tutorial/86/bash-case.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cas de bash" 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="/bash-tutorial/">Tutoriel Bash </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/bash-case">Cas de bash </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/46/whats-your-zodiac-sign.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quel est votre signe du zodiaque ? Les 12 symboles du zodiaque" 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="/whats-your-zodiac-sign-131676">Quel est votre signe du zodiaque ? Les 12 symboles du zodiaque </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/javascript-tutorial/69/javascript-window-open-method.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Méthode d'ouverture de la fenêtre JavaScript" 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="/javascript-tutorial/">Tutoriel Javascript </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/javascript-window-open-method">Méthode d'ouverture de la fenêtre JavaScript </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/ds-tutorial/14/circular-queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="File d'attente circulaire" 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="/ds-tutorial/">Tutoriel Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/circular-queue">File d'attente circulaire </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>