Norėdami vertikaliai centruoti tekstą su CSS, derinkite konkrečias ypatybes, kad užtikrintumėte puikų suderinimą konteineryje. Tai padeda išlaikyti vizualinę pusiausvyrą ir skaitomumą įvairiuose ekrano dydžiuose ir skyrose.
Toliau pateikiami būdai, kaip vertikaliai centruoti tekstą naudojant CSS:
Turinys
- Naudojant ekraną: lentelė-ląstelė
- Naudojant linijos aukštį ir vertikalią lygiavimą
- Naudojant Flexbox metodą
Naudojant display: table-cell>
Vertikalus teksto centravimas naudojant ekraną: lentelė-ląstelė; vertikalus lygiavimas: vidurys; ant konteinerio elemento, užtikrinant tikslų išlygiavimą, nepaisant turinio dydžio ar ekrano matmenų. Konteineris apima visą peržiūros srities aukštį (100 VH) ir plotį (100 VW) su brūkšnine kraštine ir smėlio spalvos fonu.
eilutė c
Pavyzdys: Toliau pateiktame pavyzdyje parodytas vertikaliai centruojamas tekstas naudojant CSSdisplay: table-cell>.
js base64 dekodavimasHTML
Horizontalus ir vertikalus lygiavimastitle><style>.konteineris { aukštis: 100vh; plotis: 100vw; ekranas: lentelės langelis; vertikalus lygiavimas: vidurys; kraštinė: 2 tšk. brūkšninis #4b2869; fono spalva: smėlio spalvos; } style> head> <body> <div>Vertikaliai centruokite tekstą su ekranu: lentelės langelis Ypatybė div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="kalnų dviratis"><p>Išvestis</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>Naudojant</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>ir</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>Vertikaliai centre</span> <b><code class='hljs'> the></code></b> <span>tekstas div elemente naudojant eilutės aukštį: 200 pikselių; kad atitiktų jo aukštį, o vertikaliai lygiuoti: vidurys; ant įdėto tarpo užtikrina tikslų lygiavimą, nepaisant šrifto dydžio. Teksto lygiavimas: centre; ypatybė horizontaliai centruoja tekstą, o brūkšninė kraštinė suteikia vizualų skirtumą.</span> <b> <strong>Pavyzdys:</strong> </b> <span>Pavyzdyje rodomas vertikaliai centruojantis tekstas naudojant CSS</span><code class='hljs'>line-height></code><span>ir</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontalaus ir vertikalaus lygiavimo pavadinimas><style>div { aukštis: 200 taškų; eilutės aukštis: 200 pikselių; teksto lygiavimas: centre; kraštinė: 2px brūkšninis #f69c55; } span { display: inline-block; vertikalus lygiavimas: vidurys; linijos aukštis: normalus; } style> head> <body> <div> <span>techcodeview.comspan> div> body> html>>></tag> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="Vertikaliai centre, naudojant linijos aukštį ir vertikalią lygiavimą"><h2 id='using-flexbox-method'><span>Naudojant Flexbox metodą</span></h2><p dir='ltr'><span>Norėdami išlyginti vertikaliai</span><code class='hljs'>a></pre> </code> <b><tag data-text-2='></code></b> <span>tekstą naudojant Flexbox metodą, nustatant ekraną: flex; lygiuoti elementus: centre; ant korpuso elemento, užtikrinant puikų centravimą, nepaisant ekrano dydžio. Tekstas formuojamas šrifto dydžiu: 20 pikselių; šrifto svoris: paryškintas; skaitomumui.</span></p> <p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Toliau pateiktame pavyzdyje parodytas vertikaliai centre tekstas naudojant 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>Vertikalaus centro tekstas – Flexbox Methodtitle><style>body { display: flex; lygiuoti elementus: centre; aukštis: 100vh; paraštė: 0; fono spalva: rgb(181, 226, 211); } .text { šrifto dydis: 20 pikselių; šrifto svoris: paryškintas; } style> head> <body> <div>Vertikalus teksto lygiavimas naudojant „Flexbox Method“ div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/set-java">nustatyta java</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="vertikaliai suderinti-lenkti"><p>Išvestis</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="">Kategorija</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/microsoft-azure-tutorial/">„Microsoft Azure“ Pamoka</a> </li><li> <a href="/figma/">Figma</a> </li><li> <a href="/cpp-friend/">Cpp-Draugas</a> </li><li> <a href="/commerce-12th/">Komercija – 12 D</a> </li><li> <a href="/law/">Teisė</a> </li><li> <a href="/bfs/">Bfs</a> </li><li> <a href="/java-8-date-time/">Java 8 Data Laikas</a> </li><li> <a href="/natural-language-processing/">Natūralios Kalbos Apdorojimas</a> </li><li> <a href="/java-strings/">Java-Stygos</a> </li><li> <a href="/esports-gamers/">Esporto Žaidėjai</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">Visas planas: kada turėčiau pradėti studijuoti SAT?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kada yra geriausias laikas pradėti studijuoti SAT? Ar tai pirmakursis, antrakursis ar jaunesnis? Perskaitykite mūsų išsamų vadovą, kad sužinotumėte.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/complete-plan-when-should-i-start-studying-1311432"> <i class="fa fa-external-link"></i> Skaityti Daugiau</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Įdomios Straipsniai</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/class-diagram-unified-modeling-language">Klasės diagrama | Vieningoji modeliavimo kalba (UML)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-access-android-settings-menu">Kaip pasiekti „Android“ nustatymų meniu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/structure-java-program">Java programos struktūra</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-while-loop">Python While Loop</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-an-epilogue-definition-1311510">Kas yra epilogas? Apibrėžimas ir pavyzdžiai</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">Populiarios Temos</h2>
<div class="content">
<ul class="list"> <li><a href="/apache-groovy-tutorial">niūri kalba</a>
</li><li><a href="/object-class-java">objektų klasė java</a>
</li><li><a href="/base64-decoding-javascript">javascript base64 dekodavimas</a>
</li><li><a href="/java-convert-int-double">java int į dvigubą</a>
</li><li><a href="/quick-sort-algorithm">greitai rūšiuoti</a>
</li><li><a href="/history-java">istorija 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 Visos Teisės Saugomos | <a href="//it.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atsisakymas</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Apie Mus</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privatumo Politika</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>