Lai vertikāli centrētu tekstu ar CSS, apvienojiet konkrētus rekvizītus, lai nodrošinātu perfektu līdzināšanu tā konteinerā. Tas palīdz saglabāt vizuālo līdzsvaru un lasāmību dažādos ekrāna izmēros un izšķirtspējās.
Tālāk ir norādītas pieejas teksta vertikālai centrēšanai ar CSS:
Satura rādītājs
- Izmantojot displeju: tabula-šūna
- Izmantojot līnijas augstumu un vertikālo izlīdzināšanu
- Izmantojot Flexbox metodi
Izmantojot display: table-cell>
Uz teksta vertikālo centrēšanu, izmantojot displeju: tabula-šūna; vertikāli izlīdzināt: vidū; uz konteinera elementa, nodrošinot precīzu izlīdzināšanu neatkarīgi no satura izmēra vai ekrāna izmēriem. Konteiners aptver visu skata loga augstumu (100 vh) un platumu (100 vw) ar punktētu apmali un smilškrāsas fonu.
centrējot attēlus css
Piemērs: Tālāk esošajā piemērā teksts ir vertikāli centrēts, izmantojot CSSdisplay: table-cell>.
svarīgsHTML
Horizontālais un vertikālais līdzinājumstitle><style>.container { augstums: 100vh; platums: 100vw; displejs: tabula-šūna; vertikāli izlīdzināt: vidū; apmale: 2 pikseļi punktveida #4b2869; fona krāsa: bēša; } style> head> <body> <div>Vertikāli centrējiet tekstu ar displeju: table-cell Property div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="kalnu velosipēds"><p>Izvade</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>Izmantojot</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>un</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>Uz vertikāli centrā</span> <b><code class='hljs'> the></code></b> <span>teksts div elementā, izmantojot līnijas augstumu: 200 pikseļi; lai atbilstu tā augstumam, bet vertikāli izlīdzināt: vidū; uz ligzdotas laiduma nodrošina precīzu līdzināšanu neatkarīgi no fonta lieluma. Teksta līdzināšana: centrā; rekvizīts horizontāli centrē tekstu, un pārtraukta robeža nodrošina vizuālu atšķirību.</span> <b> <strong>Piemērs:</strong> </b> <span>Piemērā ir parādīts vertikāli centrēts teksts, izmantojot CSS</span><code class='hljs'>line-height></code><span>un</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontālā un vertikālā līdzinājuma virsraksts><style>div { augstums: 200 pikseļi; līnijas augstums: 200 pikseļi; teksta līdzināšana: centrs; apmale: 2 pikseļi punktveida #f69c55; } span { displejs: inline-block; vertikāli izlīdzināt: vidū; līnijas augstums: normāls; } style> head> <body> <div> <span>techcodeview.comspan> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="Vertikāli centrējiet, izmantojot līnijas augstumu un vertikālo līdzināšanu"><h2 id='using-flexbox-method'><span>Izmantojot Flexbox metodi</span></h2><p dir='ltr'><span>Lai vertikāli izlīdzinātu</span><code class='hljs'>a></code> <b><code class='hljs'>></code></b> <span>tekstu, izmantojot Flexbox metodi, iestatot displeju: flex; izlīdzināt vienumus: centrs; uz korpusa elementa, nodrošinot perfektu centrēšanu neatkarīgi no ekrāna izmēra. Teksts ir veidots ar fonta lielumu: no 20 pikseļiem; fonta svars: treknrakstā; lasāmībai.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/c-programs">c programmas</a>
</blockquote> <p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Tālāk esošajā piemērā teksts ir vertikāli centrēts ar 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>Vertikālā centra teksts — Flexbox Methodtitle><style>body { displejs: flex; izlīdzināt vienumus: centrs; augstums: 100vh; piemale: 0; fona krāsa: rgb(181, 226, 211); } .text { fonta izmērs: 20 pikseļi; fonta svars: treknrakstā; } style> head> <body> <div>Teksta vertikālā līdzināšana, izmantojot Flexbox metodi div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="Vertikāli izlīdzināt-flex"><p>Izvade</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="/python-projects/">Python Projekti</a> </li><li> <a href="/ssis-tutorial/">Ssis Apmācība</a> </li><li> <a href="/combinatorial/">Kombinatorisks</a> </li><li> <a href="/tourist-places/">Tūrisma Vietas</a> </li><li> <a href="/sorting/">Šķirošana</a> </li><li> <a href="/shell-script/">Shell Skripts</a> </li><li> <a href="/instagram/">Instagram</a> </li><li> <a href="/cpp-operator/">Cpp Operators</a> </li><li> <a href="/java-control-flow/">Java-Control-Flow</a> </li><li> <a href="/atoms-ions/">Atomi Un Joni</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">Agile Apmācība</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Agile Apmācība</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/agile-tutorial/"> <i class="fa fa-external-link"></i> Lasīt Vairāk</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interesanti Raksti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/sql-select-into-statement">SQL SELECT INTO paziņojums</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/psat-score-needed-national-merit-scholarship-1311078">PSAT rezultāts, kas nepieciešams valsts nopelnu stipendijai</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/acute-angled-triangle">Akūts leņķiskais trīsstūris</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/paging-operating-system">Lapošana operētājsistēmā</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/my-height-is-172-cm-how-many-feet-am-i">Mans augums ir 172 cm. Cik pēdu es esmu?</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ārākas Posts</h2>
<div class="content">
<ul class="list"> <li><a href="/mkdir-command-linux-unix-with-examples">unix izveidot direktoriju</a>
</li><li><a href="/add-elements-array-java">java pievienot masīvam</a>
</li><li><a href="/powershell-run-administrator">runas in powershell</a>
</li><li><a href="/java-string-replace">str.replace valodā java</a>
</li><li><a href="/powershell-comments">powershell daudzrindu komentārs</a>
</li><li><a href="/numpy-unique-python">numpy unikāls</a>
</li><li><a href="/java-string-contains">string.contains 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 Visas Tiesības Aizsargātas | <a href="//cs.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Atruna</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Par Mums</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privātuma 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>
</body>
</html>