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="/law-us/">Lag Usa</a> </li><li> <a href="/companies-list/">Företagslista</a> </li><li> <a href="/c-functions/">C-Funktioner</a> </li><li> <a href="/binary-search/">Binär Sökning</a> </li><li> <a href="/web-scraping/">Web-Skrapning</a> </li><li> <a href="/maths-formulas/">Matematik-Formler</a> </li><li> <a href="/physics-difference-between/">Fysik-Skillnad-Mellan</a> </li><li> <a href="/free-games/">Gratis Spel</a> </li><li> <a href="/java-basics/">Java-Grunderna</a> </li><li> <a href="/best/">Bäst</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">Python String join() Metod</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> En datavetenskapsportal för nördar. Den innehåller välskrivna, genomtänkta och väl förklarade artiklar om datavetenskap och programmering, frågesporter och frågor om praktik/konkurrenskraftig programmering/företagsintervju.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-string-join-method"> <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-get-current-page-url-php">Hur får man den aktuella sidans URL i PHP?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-longest-nonstop-flights-world-2024">Topp 10 längsta direktflyg i världen 2024</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-function">C#-funktion</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-convert-list-dictionary-python">Hur konverterar man lista till ordbok i Python?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/card-probability">Kort sannolikhet</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-see-blocked-number">spärrade nummer</a>
</li><li><a href="/collections-java">java samling</a>
</li><li><a href="/gimp-change-colors">gimp ersätter färg</a>
</li><li><a href="/sql-composite-key">primär nyckel sammansatt nyckel</a>
</li><li><a href="/spring-initializr">spring initializr</a>
</li><li><a href="/agents-artificial-intelligence">artificiell intelligens och intelligenta agenter</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="//hr.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>
</body>
</html>