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><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/hadoop-tutorial">hadoop-tutorial</a>
</blockquote> <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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/fibonacci-series-java">fibonacci-reeks java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <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 class='hljs'> <pre class='hljs'> <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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <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 class='hljs'> <pre class='hljs'> <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 class='hljs'> <pre class='hljs'> <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><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/spring-boot-annotations">annotaties in springlaars</a>
</blockquote> <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></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/c-string/">C#-Tekenreeks</a> </li><li> <a href="/python-utility/">Python-Hulpprogramma</a> </li><li> <a href="/knapsack/">Knapsack</a> </li><li> <a href="/mockito-tutorial/">Mockito-Zelfstudie</a> </li><li> <a href="/ai-news/">Ai-Nieuws</a> </li><li> <a href="/net-framework/">.Net-Framework</a> </li><li> <a href="/sql-server/">Sql-Server</a> </li><li> <a href="/how-install/">Hoe Installeren</a> </li><li> <a href="/bootstrap-5-cat/">Bootstrap 5</a> </li><li> <a href="/linux-man-pages/">Linux Man-Pagina's</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Breedte eerst zoeken of BFS voor een grafiek</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Een informaticaportaal voor nerds. Het bevat goed geschreven, goed doordachte en goed uitgelegde artikelen over computerwetenschappen en programmeren, quizzen en vragen over oefenen/competitief programmeren/bedrijfsinterviews.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/breadth-first-search"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/list-206-bones-human-body">Lijst van 206 botten in het menselijk lichaam</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpp-library/">Cpp-Bibliotheek</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/10-most-dangerous-jobs-united-states-2024">De 10 gevaarlijkste banen in de Verenigde Staten 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/can-you-take-sat-after-high-school-1311368">Kun je de SAT volgen na de middelbare school? Deskundige gids</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/algorithms-insertionsort/">Algoritmen-Insertionsort</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/what-is-10-ml-ounces">10 ml is hoeveel</a>
</li><li><a href="/css-text-align">CSS-tekst uitlijnen</a>
</li><li><a href="/shloka-mehta">shloka mehta-onderwijs</a>
</li><li><a href="/java-convert-string-int">java roert naar int</a>
</li><li><a href="/how-access-android-settings-menu">instellingenmenu openen</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechten Voorbehouden | <a href="//lv.techcodeview.com/">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>
</body>
</html>