Om tekst verticaal te centreren met CSS, combineert u specifieke eigenschappen om een perfecte uitlijning binnen de container te garanderen. Dit helpt de visuele balans en leesbaarheid op verschillende schermformaten en resoluties te behouden.
Hieronder vindt u de benaderingen voor het verticaal centreren van tekst met CSS:
Inhoudsopgave
- Weergave gebruiken: tabelcel
- Gebruik lijnhoogte en verticaal uitlijnen
- Met behulp van de Flexbox-methode
Gebruik makend van display: table-cell>
Naar verticaal centreren van tekst met behulp van weergave: tabelcel; verticaal uitlijnen: midden; op het containerelement, waardoor een nauwkeurige uitlijning wordt gegarandeerd, ongeacht de inhoudsgrootte of schermafmetingen. De container bestrijkt de volledige hoogte (100vh) en breedte (100vw) van de viewport, met een stippellijn en een beige achtergrond.
een kaart herhalen in Java
Voorbeeld: Het onderstaande voorbeeld toont het verticaal centreren van tekst met CSSdisplay: table-cell>.
steden in AustraliëHTML
Horizontale en verticale uitlijningtitel><style>.container { hoogte: 100vh; breedte: 100vw; weergave: tabelcel; verticaal uitlijnen: midden; rand: 2px gestippeld #4b2869; achtergrondkleur: beige; } stijl> hoofd> <body> <div>Tekst verticaal centreren met weergave: tabelcel Eigenschap div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="Mountain bike"><p>Uitvoer</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>Gebruik makend van</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>En</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>Om verticaal te centreren</span> <b><code class='hljs'> the></code></b> <span>tekst binnen een div-element met regelhoogte: 200px; om de hoogte aan te passen, terwijl het verticaal uitgelijnd is: midden; op een geneste spanwijdte zorgt voor een nauwkeurige uitlijning, ongeacht de lettergrootte. De tekstuitlijning: centreren; eigenschap centreert de tekst horizontaal, en een stippellijn zorgt voor visueel onderscheid.</span> <b> <strong>Voorbeeld:</strong> </b> <span>In het voorbeeld wordt tekst verticaal gecentreerd weergegeven met CSS</span><code class='hljs'>line-height></code><span>En</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontale en verticale uitlijningstitel><style>div {hoogte: 200px; lijnhoogte: 200px; tekst uitlijnen: centreren; rand: 2px gestippeld #f69c55; } span {weergave: inline-blok; verticaal uitlijnen: midden; lijnhoogte: normaal; } stijl> hoofd> <body> <div> <span>techcodeview.comspan> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="Verticaal centreren met lijnhoogte en verticaal uitlijnen"><h2 id='using-flexbox-method'><span>Met behulp van de Flexbox-methode</span></h2><p dir='ltr'><span>Om verticaal uit te lijnen</span><code class='hljs'>a></code> <b><code class='hljs'>></code></b> <span>tekst met behulp van de Flexbox-methode door weergave in te stellen: flex; items uitlijnen: centreren; op het lichaamselement, waardoor een perfecte centrering wordt gegarandeerd, ongeacht de schermgrootte. De tekst is opgemaakt met lettergrootte: van 20px; lettertypegewicht: vet; voor leesbaarheid.</span></p> <p dir='ltr'> <b> <strong>Voorbeeld:</strong> </b> <span>Het onderstaande voorbeeld toont tekst verticaal centreren met CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Verticale gecentreerde tekst - Flexbox Methodtitle><style>lichaam {weergave: flex; items uitlijnen: centreren; hoogte: 100vh; marge: 0; achtergrondkleur: rgb(181, 226, 211); } .text {lettergrootte: 20px; lettertypegewicht: vet; } stijl> hoofd> <body> <div>Verticale uitlijning van de tekst met behulp van Flexbox Method 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="/steps-write-execute-script">hoe je een script uitvoert in Linux</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="verticaal-uitlijnen-flex"><p>Uitvoer</p> <br> <br></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="//changelesschoir.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/memory-management/">Geheugen Management</a> </li><li> <a href="/physics-questions/">Natuurkunde-Vragen</a> </li><li> <a href="/circles/">Cirkels</a> </li><li> <a href="/dsa-blogs/">Dsa-Blogs</a> </li><li> <a href="/get-informed/">Laat U Informeren</a> </li><li> <a href="/2d-shapes/">2D-Vormen</a> </li><li> <a href="/github/">Github</a> </li><li> <a href="/linux-files/">Linux-Bestanden</a> </li><li> <a href="/java-object-class/">Java-Objectklasse</a> </li><li> <a href="/css-basics/">Css-Basisprincipes</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Wat is de volledige vorm van COMPUTER</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Volledige vorm van Computer, Wat is Computer, Computer staat voor, betekenis, wat is, beschrijving, voorbeeld, uitleg, acroniem voor, afkorting, definities, volledige naam</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-full-form-computer"> <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="/namespace-python">Naamruimte in Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ascii-values-alphabets-z">ASCII-waarden alfabetten (tabel A-Z, a-z en speciale tekens)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spring-constant-formula">Lenteconstante formule</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/why-is-ios-better-than-android">Waarom is iOS beter dan Android?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nearest-prime-less-than-given-number-n">Dichtstbijzijnde priemgetal kleiner dan gegeven getal n</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="/numpy-mean-python">np bedoel</a>
</li><li><a href="/chown-command-linux-unix-with-examples">chown-opdracht</a>
</li><li><a href="/factory-method-pattern">fabrieksontwerppatroon</a>
</li><li><a href="/mylivecricket-alternatives">mijnlivecricket</a>
</li><li><a href="/pandas-dataframe-loc">panda's loc</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="//no.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>
<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: #213141;
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: #555;
}
`,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>