För att centrera text vertikalt med CSS, kombinera specifika egenskaper för att säkerställa perfekt justering inom dess behållare. Detta hjälper till att upprätthålla visuell balans och läsbarhet över olika skärmstorlekar och upplösningar.
Nedan är metoderna för att centrera text vertikalt med CSS:
Innehållsförteckning
Använder sig av display: table-cell>
Till vertikal centrering av text med hjälp av display: tabell-cell; vertikal-align: mitten; på behållarelementet, vilket säkerställer exakt justering oavsett innehållsstorlek eller skärmdimensioner. Behållaren spänner över hela utsiktsportens höjd (100vh) och bredden (100vw), med en streckad kant och beige bakgrund.
byta namn på mapp i linux
Exempel: Exemplet nedan visar Vertikalt centrera text med CSS med hjälp avdisplay: table-cell>.
shehzad poonawalaHTML
Horisontell och vertikal alignmenttitle><style>.container { höjd: 100vh; bredd: 100vw; display: tabell-cell; vertikal-align: mitten; kantlinje: 2px streckad #4b2869; bakgrundsfärg: beige; } stil> huvud> <body> <div>Vertikalt Centrera text med display: tabell-cell Egenskap div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="mountainbike"><p>Produktion</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>Använder sig av</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>och</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>Att centrera vertikalt</span> <b><code class='hljs'> the></code></b> <span>text i ett div-element med line-height: 200px; för att matcha dess höjd, medan vertikal-justera: mitten; på ett kapslat spann säkerställer exakt justering oavsett teckenstorlek. Textjustera: centrera; egenskapen centrerar texten horisontellt och en streckad kant ger visuell distinktion.</span> <b> <strong>Exempel:</strong> </b> <span>Exemplet visar Vertikalt centrera text med CSS med hjälp av</span><code class='hljs'>line-height></code><span>och</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horisontell och vertikal justering titel><style>div { höjd: 200px; linjehöjd: 200px; text-align: center; kantlinje: 2px streckad #f69c55; } span { display: inline-block; vertikal-align: mitten; linjehöjd: normal; } stil> huvud> <body> <div> <span>techcodeview.comspan> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="Centrera vertikalt med hjälp av linjehöjd och vertikaljustera"><h2 id='using-flexbox-method'><span>Använder Flexbox-metoden</span></h2><p dir='ltr'><span>Att rikta in vertikalt</span><code class='hljs'>a></code> <b><code class='hljs'>></code></b> <span>text med Flexbox-metoden genom att ställa in display: flex; align-items: center; på kroppselementet, vilket säkerställer perfekt centrering oavsett skärmstorlek. Texten är formaterad med font-size: 20px; font-weight: fet; för läsbarhet.</span></p> <p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Exemplet nedan visar vertikalt centrera text med 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>Vertical Center Text - Flexbox Methodtitle><style>body { display: flex; align-items: center; höjd: 100vh; marginal: 0; bakgrundsfärg: rgb(181, 226, 211); } .text { font-size: 20px; font-weight: fet; } stil> huvud> <body> <div>Vertikal justering av texten med Flexbox Method div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/strikethrough-markdown">genomstruken markdown</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="vertikal-align-flex"><p>Produktion</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/digital-electronics-logic-gate/">Digital Elektronik - Logic Gate</a> </li><li> <a href="/classroom-resources/">Klassrumsresurser</a> </li><li> <a href="/binary-search-tree/">Binärt sökträd</a> </li><li> <a href="/microservices-tutorial/">Handledning För Mikrotjänster</a> </li><li> <a href="/node-js-fs-module/">Node.js-Fs-Modul</a> </li><li> <a href="/unity-tutorial/">Handledning För Enhet</a> </li><li> <a href="/data-structures-algorithms-qna/">Datastrukturer Och Algoritmer-Qna</a> </li><li> <a href="/java-multithreading/">Java Multithreading</a> </li><li> <a href="/min-heap/">Min-Hög</a> </li><li> <a href="/alternatives/">Alternativ</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">Intressanta fakta om null i Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Nästan alla programmeringsspråk är bundna med null. Det finns knappast en programmerare som inte besväras av null. I Java är null associerat java.lang.NullPointerException. Eftersom det är en klass i paketet java.lang, kallas det när vi försöker utföra vissa operationer med eller utan null, och ibland vet vi inte ens var det har hänt. Nedan finns några viktiga punkter om null i java som alla Java-programmerare bör känna till:</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/interesting-facts-about-null-in-java"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-split-string-golang">Hur delar man en sträng i Golang?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-os-environ-object">Python | os.environ objekt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-copy-constructor-example">Exempel på Java Copy Constructor</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-vector-class/">Java Vector Klass</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/4-amazing-recommendation-letter-samples-131394">4 fantastiska exempel på rekommendationsbrev för studenter</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">Populära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/how-open-tif-tiff-files-android">.tif-fil</a>
</li><li><a href="/what-is-listening-port">lyssna port</a>
</li><li><a href="/ubuntu-ipconfig">ipconfig för ubuntu</a>
</li><li><a href="/what-is-trie-data-structure">prova datastruktur</a>
</li><li><a href="/300-core-java-interview-questions-set-1">intervjufrågor för java språk</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 Alla Rättigheter Förbehållna | <a href="//nl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>