Hoe centreer ik tekst (horizontaal en verticaal) binnen een div-blok in CSS?
Centreer tekst zowel horizontaal als verticaal binnen een div-blok is belangrijk voor het creëren van visueel aantrekkelijke lay-outs. Verschillende methoden, zoals flexbox-, grid- en CSS-transformaties, bieden oplossingen met duidelijke voor- en nadelen. In dit artikel worden deze veelgebruikte benaderingen voor het centreren van tekst binnen div-blokken onderzocht.
Inhoudsopgave
- Flexbox gebruiken
- Raster gebruiken
- Tekst uitlijnen gebruiken
- Tabelcel gebruiken
- Transformatie-eigenschap gebruiken
Flexbox gebruiken:
- Stel de bovenliggende container in op weergave: flex; Hierdoor is het mogelijk om een flexbox en verandert de oudercontainer in een flexcontainer.
- Gebruik rechtvaardigen-inhoud: centrum om het onderliggende element horizontaal binnen de bovenliggende container te centreren.
- Gebruik uitlijnen-items: centreren om het onderliggende element verticaal binnen de bovenliggende container te centreren.
Voorbeeld: Dit voorbeeld laat zien hoe u tekst binnen een div kunt centreren met behulp van de flexbox-eigenschap van CSS .
HTML Centreer tekst horizontaal en verticaal binnen een div-bloktitel> <style>body {tekst uitlijnen: centreren; } .container { hoogte: 300px; breedte: 645px; weergave: flex; rechtvaardigen-inhoud: midden; items uitlijnen: centreren; rand: 2px effen zwart; } h1 { kleur: groen; } stijl> hoofd> <body> <div> <h1>GeekforGeeksh1> div> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-grid'> <span>Raster gebruiken </span> </h2> <ul> <li value='1'> <span>CSS-raster </span> <span>is een andere populaire lay-outtool waarmee u complexe en flexibele, op rasters gebaseerde lay-outs kunt maken. </span> </li> <li value='2'> <span>Stel de bovenliggende container in op </span> <b> <strong>weergave: raster </strong> </b> <span>. Dit maakt het gebruik van een CSS-raster mogelijk en verandert de bovenliggende container in een rastercontainer. </span> </li> <li value='3'> <span>Gebruik de </span> <b> <strong> </strong> </b> <b> <strong>plaats-items: midden </strong> </b> <span>eigenschap om het onderliggende element zowel horizontaal als verticaal binnen de rastercel te centreren. Deze eigenschap is een afkorting voor beide </span> <b> <strong>rechtvaardigen-items </strong> </b> <span>En </span> <b> <strong>uitlijnen-items </strong> </b> <span>. </span> </li> </ul> <p dir='ltr'> <b> <strong>Voorbeeld: </strong> </b> <span>Dit voorbeeld laat zien hoe u tekst binnen een div kunt centreren met behulp van de grid-eigenschap van CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centreer tekst horizontaal en verticaal binnen een div-bloktitel> <style>.container {hoogte: 300px; breedte: 645px; weergave: raster; plaats-items: midden; rand: 2px effen zwart; } h1 { kleur: groen; } stijl> hoofd> <body> <div> <h1>GeekforGeeksh1> div> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-text-align'> <b> <strong>Tekst uitlijnen gebruiken: </strong> </b> </h2> <ul> <li value='1'> <span>De </span> <span>tekst uitlijnen </span> <span>eigenschap is een eenvoudige en duidelijke manier om tekst horizontaal binnen een div-blok te centreren. </span> </li> <li value='2'> <span>Stel de bovenliggende container in op </span> <b> <strong>tekst uitlijnen: centreren. </strong> </b> <span>Hierdoor wordt het onderliggende element horizontaal gecentreerd binnen de bovenliggende container. </span> </li> <li value='3'> <span>Gebruik </span> <b> <strong>lijnhoogte: </strong> </b> <span>om het onderliggende element verticaal binnen de bovenliggende container te centreren. De waarde van moet gelijk zijn aan de hoogte van de bovenliggende container. </span> </li> </ul> <p dir='ltr'> <b> <strong>Voorbeeld: </strong> </b> <span>Dit voorbeeld laat zien hoe u tekst binnen een div kunt centreren met behulp van de tekstuitlijning van CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centreer tekst horizontaal en verticaal binnen een div-bloktitel> <style>.container {hoogte: 300px; breedte: 645px; tekst uitlijnen: centreren; lijnhoogte: 400px; rand: 2px effen zwart; } h1 { kleur: groen; } stijl> hoofd> <body> <div> <h1>GeekforGeeksh1> div> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-table-cell'> <span>Tabelcel gebruiken </span> </h2> <ul> <li value='1'> <span>Stel de bovenliggende container in op </span> <b> <strong>weergave: tafel. </strong> </b> <span>Dit emuleert het gedrag van een tabel. </span> </li> <li value='2'> <span>Stel het onderliggende element in op </span> <b> <strong>weergave: tabelcel </strong> </b> <span>. Dit emuleert het gedrag van een tabelcel. </span> </li> <li value='3'> <span>Gebruik </span> <b> <strong>verticaal uitlijnen: midden </strong> </b> <span>om het onderliggende element verticaal binnen de bovenliggende container te centreren. </span> </li> <li value='4'> <span>Gebruik </span> <b> <strong>tekst uitlijnen: centreren </strong> </b> <span>om het onderliggende element horizontaal binnen de bovenliggende container te centreren. </span> </li> </ul> <p dir='ltr'> <b> <strong>Voorbeeld: </strong> </b> <span>Dit voorbeeld laat zien hoe u tekst binnen een div kunt centreren met behulp van de teksttabelcel van CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centreer tekst horizontaal en verticaal binnen een div-bloktitel> <style>.container {hoogte: 300px; breedte: 645px; weergave: tabelcel; tekst uitlijnen: centreren; verticaal uitlijnen: midden; rand: 2px effen zwart; } h1 { kleur: groen; } stijl> hoofd> <body> <div> <h1>GeekforGeeksh1> div> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <h2 id='using-transform-property'> <span>Transformatie-eigenschap gebruiken: </span> </h2> <ul> <li value='1'> <span>Stel de bovenliggende container in op </span> <b> <strong>positie: relatief. </strong> </b> <span>Dit maakt het gebruik van absolute positionering voor het onderliggende element mogelijk. </span> </li> <li value='2'> <span>Stel het onderliggende element in op </span> <b> <strong>positie: absoluut. </strong> </b> <span>Dit maakt het gebruik van absolute positionering voor het onderliggende element mogelijk. </span> </li> <li value='3'> <span>Stel die van het onderliggende element in </span> <b> <strong>bovenkant </strong> </b> <span>En </span> <b> <strong>links </strong> </b> <span>eigenschappen aan </span> <b> <strong>vijftig% </strong> </b> <span>. Hierdoor wordt het onderliggende element in het midden van de bovenliggende container geplaatst. </span> </li> <li value='4'> <span>Gebruik </span> <b> <strong>transformeren: vertalen(-50%, -50%) </strong> </b> <span>om het onderliggende element zowel horizontaal als verticaal te centreren. </span> </li> </ul> <p dir='ltr'> <b> <strong>Voorbeeld: </strong> </b> <span>Dit voorbeeld laat zien hoe u tekst binnen een div kunt centreren met behulp van de transform-eigenschap van CSS. </span> </p>HTML <code> <pre> <html lang='en'> <head> <title>Centreer tekst horizontaal en verticaal binnen een div-bloktitel> <style>.container {hoogte: 300px; breedte: 645px; positie: relatief; rand: 2px effen zwart; } h1 { positie: absoluut; bovenkant: 50%; kleur groen; links: 50%; transformeren: vertalen(-50%, -50%); } stijl> hoofd> <body> <div> <h1>GeekforGeeksh1> div> body> html> </pre> </code> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=''> <p dir='ltr'> <span>Samenvattend zal de gekozen aanpak afhangen van de specifieke gebruikssituatie, de compatibiliteit met andere elementen en de gewenste ontwerpesthetiek. Met deze methoden is het mogelijk om een gecentreerd tekstblok te realiseren in verschillende lay-outs en ontwerpen. </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>
Deel </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Hoe centreer ik tekst (horizontaal en verticaal) binnen een div-blok in CSS?&url=https://www.techcodeview.com/nl/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/nl/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/nl/how-center-text-horizontally&title=Hoe centreer ik tekst (horizontaal en verticaal) binnen een div-blok in 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">
Dit Vind Je Misschien Leuk </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/nl/level-order-traversal-breadth-first-search" 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/amazon/78/level-order-traversal-breadth-first-search.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Level Order Traversal (Breadth First Search of BFS) van binaire boom" 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="/nl/level-order-traversal-breadth-first-search">Level Order Traversal (Breadth First Search of BFS) van binaire boom </a>
</h4>
</div> <div class="group">
<a href="/nl/half-adder-digital-logic" 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/it-problems-solutions/74/half-adder-digital-logic.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Halve opteller in digitale logica" 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="/nl/half-adder-digital-logic">Halve opteller in digitale logica </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 Artikelen </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="/nl/parts-ms-excel-window">
<img src="https://techcodeview.com/img/ms-excel-tutorial/96/parts-ms-excel-window.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Delen van MS Excel-venster" 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="/nl/parts-ms-excel-window" class="hover:text-tech-500 transition-colors line-clamp-3">Delen van MS Excel-venster </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="/nl/best-analysis-valley-ashes-great-gatsby-131272">
<img src="https://techcodeview.com/img/blog/27/best-analysis-valley-ashes-great-gatsby.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Beste analyse: Valley of Ashes in The Great Gatsby" 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="/nl/best-analysis-valley-ashes-great-gatsby-131272" class="hover:text-tech-500 transition-colors line-clamp-3">Beste analyse: Valley of Ashes in The Great Gatsby </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="/nl/method-java">
<img src="https://techcodeview.com/img/java-tutorial/72/method-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Werkwijze in 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="/nl/method-java" class="hover:text-tech-500 transition-colors line-clamp-3">Werkwijze in 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="/nl/restart-apache-ubuntu">
<img src="https://techcodeview.com/img/linux-tutorial/85/restart-apache-ubuntu.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Start Apache Ubuntu opnieuw" 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="/nl/restart-apache-ubuntu" class="hover:text-tech-500 transition-colors line-clamp-3">Start Apache Ubuntu opnieuw </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="/nl/what-is-class-rank-what-is-good-rank-131490">
<img src="https://techcodeview.com/img/blog/91/what-is-class-rank-what-is-good-rank.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is klasserangschikking? Wat is een goede rang?" 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="/nl/what-is-class-rank-what-is-good-rank-131490" class="hover:text-tech-500 transition-colors line-clamp-3">Wat is klasserangschikking? Wat is een goede rang? </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="/nl/what-exactly-is-target-school-1311492">
<img src="https://techcodeview.com/img/blog/24/what-exactly-is-target-school.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is precies een doelschool? Hoe u de uwe kunt vinden" 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="/nl/what-exactly-is-target-school-1311492" class="hover:text-tech-500 transition-colors line-clamp-3">Wat is precies een doelschool? Hoe u de uwe kunt vinden </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="/nl/colleges-requiring-all-sat-scores-sent-1311110">
<img src="https://techcodeview.com/img/blog/12/colleges-requiring-all-sat-scores-sent.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Colleges die alle verzonden SAT-scores nodig hebben: volledige lijst" 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="/nl/colleges-requiring-all-sat-scores-sent-1311110" class="hover:text-tech-500 transition-colors line-clamp-3">Colleges die alle verzonden SAT-scores nodig hebben: volledige lijst </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="/nl/mysql-regexp_like-function">
<img src="https://techcodeview.com/img/mysql-tutorial/61/mysql-regexp_like-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL REGEXP_LIKE() Functie" 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="/nl/mysql-regexp_like-function" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL REGEXP_LIKE() Functie </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="/nl/advantages-disadvantages-instagram">
<img src="https://techcodeview.com/img/blog/40/advantages-disadvantages-instagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Voor- en nadelen van Instagram" 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="/nl/advantages-disadvantages-instagram" class="hover:text-tech-500 transition-colors line-clamp-3">Voor- en nadelen van Instagram </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="/nl/linux-rm-linux-delete-file">
<img src="https://techcodeview.com/img/linux-files/89/linux-rm-linux-delete-file.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linuxrm | Linux Bestand verwijderen" 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="/nl/linux-rm-linux-delete-file" class="hover:text-tech-500 transition-colors line-clamp-3">Linuxrm | Linux Bestand verwijderen </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">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/nl/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">
Bloggen
</a> <a href="/nl/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">
Java-Conversie
</a> <a href="/nl/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">
Wiskunde
</a> <a href="/nl/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">
Java-Collecties
</a> <a href="/nl/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">
Verschillen
</a> <a href="/nl/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">
Java-Reeks
</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">Interessante Artikelen </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/differences/39/difference-between-mb.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Verschil tussen MB en GB" 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="/nl/differences/">Verschillen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/difference-between-mb">Verschil tussen MB en GB </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-graphics/90/bresenhams-line-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lijnalgoritme van Bresenham" 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="/nl/computer-graphics/">Computer Beelden </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/bresenhams-line-algorithm">Lijnalgoritme van Bresenham </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/category/18/what-is-full-form-sfs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is de volledige vorm van SFS" 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="/nl/category/">Categorie </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/what-is-full-form-sfs">Wat is de volledige vorm van SFS </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/java-collections/15/iterators-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Iteratoren op Java" 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="/nl/java-collections/">Java-Collecties </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/iterators-java">Iteratoren op Java </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/picked/98/chgrp-command-linux-with-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="chgrp-opdracht in Linux met voorbeelden" 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="/nl/picked/">Geplukt </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/chgrp-command-linux-with-examples">chgrp-opdracht in Linux met voorbeelden </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/blog/69/where-find-best-dbq-examples.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Waar u de beste DBQ-voorbeelden kunt vinden" 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="/nl/blog/">Bloggen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/where-find-best-dbq-examples-131700">Waar u de beste DBQ-voorbeelden kunt vinden </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 Alle Rechten Voorbehouden |
<a href="//www.techcodeview.com/sr/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij? </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid </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>