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="//spiritscaution.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="/tourist-places/">Turistplatser</a> </li><li> <a href="/it-problems-solutions/">It-Problem Och Lösningar</a> </li><li> <a href="/esports-gamers/">Esportsspelare</a> </li><li> <a href="/biology-diagram/">Biologi-Diagram</a> </li><li> <a href="/layout-manager/">Layouthanterare</a> </li><li> <a href="/spring-cloud-tutorial/">Handledning För Vårmoln</a> </li><li> <a href="/prolog-tutorial/">Handledning För Prolog</a> </li><li> <a href="/python-functions/">Python Funktioner</a> </li><li> <a href="/linux-files/">Linux-Filer</a> </li><li> <a href="/arrays/">Matriser</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="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Vad är användningen av '
' i C?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Vad är användningen av
i C med Tutorial, C-språk med programmeringsexempel för nybörjare och proffs som täcker koncept, c-pekare, c-strukturer, c-union, c-strängar etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-use-rin-c"> <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="/law-logical-equivalence-discrete-mathematics">Lagen om logisk ekvivalens i diskret matematik</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/krishna-premi">Krishna Premi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/11-best-pre-law-schools-1311632">De 11 bästa förskoleskolorna</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-io-writer-class-in-java">Java.io.Writer klass i Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/latex-tutorial/">Handledning För Latex</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="/rekha">Skådespelaren Rekha</a>
</li><li><a href="/jquery-click">jquery vid klick</a>
</li><li><a href="/c-tutorial">c#</a>
</li><li><a href="/how-read-csv-file-java">läsa från en csv-fil i java</a>
</li><li><a href="/design-patterns-java">designmönster i java</a>
</li><li><a href="/java-scanner-next-method">scan.nextstring java</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="//fi.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>