Teksto centravimas tiek horizontaliai, tiek vertikaliai div bloko viduje yra svarbus kuriant vizualiai patrauklius maketus. Įvairūs metodai, tokie kaip „flexbox“, tinklelis ir CSS transformacijos, siūlo sprendimus, turinčius skirtingus privalumus ir trūkumus. Šiame straipsnyje nagrinėjami šie bendri būdai, kaip pasiekti teksto centravimą div blokuose.
Turinys
- „Flexbox“ naudojimas
- Naudojant tinklelį
- Teksto lygiavimo naudojimas
- Naudojant lentelės langelį
- Naudojant transformavimo nuosavybę
„Flexbox“ naudojimas:
- Nustatykite pirminį sudėtinį rodinį į ekranas: lankstus; Tai leidžia naudoti a flexbox ir pagrindinį konteinerį paverčia lanksčiu konteineriu.
- Naudokite pateisinti-turinys: centras kad antrinis elementas būtų centre horizontaliai pirminiame konteineryje.
- Naudokite lygiuoti elementus: centre centruoti antrinį elementą vertikaliai pirminiame konteineryje.
Pavyzdys: Šiame pavyzdyje parodyta, kaip centruoti tekstą div viduje naudojant flexbox ypatybę CSS .
HTML Centruokite tekstą horizontaliai ir vertikaliai div bloko pavadinime><style>body { text-align: centre; } .container { aukštis: 300 taškų; plotis: 645px; ekranas: lankstus; pateisinti-turinys: centras; lygiuoti elementus: centre; kraštinė: 2 pikseliai vientisai juodi; } h1 { spalva: žalia; } style> head> <body> <div> <h1>GeekforGeeksh1> 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="/java-localdatetime-class">vietos datos laikas java</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Naudojant tinklelį</span></h2><ul><li value='1'> <span>CSS tinklelis</span> <span>yra dar vienas populiarus maketavimo įrankis, leidžiantis kurti sudėtingus ir lanksčius tinklelio maketus.</span></li><li value='2'><span>Nustatykite pirminį sudėtinį rodinį į</span> <b> <strong>ekranas: tinklelis</strong> </b> <span>. Tai įgalina naudoti CSS tinklelį ir paverčia pagrindinį konteinerį tinklelio konteineriu.</span></li><li value='3'><span>Naudoti</span> <b> <strong> </strong> </b> <b> <strong>vietos elementai: centras</strong> </b> <span>savybė centruoti antrinį elementą tiek horizontaliai, tiek vertikaliai tinklelio langelyje. Ši savybė yra abiejų santrumpa</span> <b> <strong>pateisinti-elementai</strong> </b> <span>ir</span> <b> <strong>išlyginti elementus</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje parodyta, kaip centruoti tekstą div viduje naudojant CSS tinklelio ypatybę.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/python-programs-python-programming-examples">Python programų sąrašas</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centruokite tekstą horizontaliai ir vertikaliai div bloko pavadinime><style>.container { aukštis: 300 taškų; plotis: 645px; ekranas: tinklelis; vietos daiktai: centras; kraštinė: 2px vientisa juoda; } h1 { spalva: žalia; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Teksto lygiavimo naudojimas:</strong> </b> </h2><ul><li value='1'><span>The</span> <span>teksto lygiavimas</span> <span>nuosavybė yra paprastas ir nesudėtingas būdas centruoti tekstą horizontaliai div bloke.</span></li><li value='2'><span>Nustatykite pirminį sudėtinį rodinį į</span> <b> <strong>teksto lygiavimas: centre.</strong> </b> <span>Tai centruoja antrinį elementą horizontaliai pirminiame konteineryje.</span></li><li value='3'><span>Naudokite</span> <b> <strong>linijos aukštis:</strong> </b> <span>centruoti antrinį elementą vertikaliai pirminiame konteineryje. Reikšmė turi būti lygi pirminio sudėtinio rodinio aukščiui.</span></li></ul><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje parodyta, kaip centruoti tekstą div viduje, naudojant CSS teksto lygiavimą.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centruokite tekstą horizontaliai ir vertikaliai div bloko pavadinime><style>.container { aukštis: 300 taškų; plotis: 645px; teksto lygiavimas: centre; eilutės aukštis: 400 pikselių; kraštinė: 2px vientisa juoda; } h1 { spalva: žalia; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Naudojant lentelės langelį</span></h2><ul><li value='1'><span>Nustatykite pirminį sudėtinį rodinį į</span> <b> <strong>ekranas: lentelė.</strong> </b> <span>Tai imituoja lentelės elgesį.</span></li><li value='2'><span>Nustatykite antrinį elementą į</span> <b> <strong>ekranas: lentelės langelis</strong> </b> <span>. Tai imituoja lentelės langelio elgesį.</span></li><li value='3'><span>Naudokite</span> <b> <strong>vertikalus lygiavimas: viduryje</strong> </b> <span>centruoti antrinį elementą vertikaliai pirminiame konteineryje.</span></li><li value='4'><span>Naudokite</span> <b> <strong>teksto lygiavimas: centre</strong> </b> <span>kad antrinis elementas būtų centre horizontaliai pirminiame konteineryje.</span></li></ul><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje parodyta, kaip centruoti tekstą div viduje, naudojant CSS teksto lentelės langelį.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centruokite tekstą horizontaliai ir vertikaliai div bloko pavadinime><style>.container { aukštis: 300 taškų; plotis: 645px; ekranas: lentelės langelis; teksto lygiavimas: centre; vertikalus lygiavimas: vidurys; kraštinė: 2 pikseliai vientisai juodi; } h1 { spalva: žalia; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Išvestis:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Transformavimo nuosavybės naudojimas:</span></h2><ul><li value='1'><span>Nustatykite pirminį sudėtinį rodinį į</span> <b> <strong>padėtis: santykinė.</strong> </b> <span>Tai leidžia naudoti absoliučią antrinio elemento padėties nustatymą.</span></li><li value='2'><span>Nustatykite antrinį elementą į</span> <b> <strong>padėtis: absoliuti.</strong> </b> <span>Tai leidžia naudoti absoliučią antrinio elemento padėties nustatymą.</span></li><li value='3'><span>Nustatykite antrinį elementą</span> <b> <strong>viršuje</strong> </b> <span>ir</span> <b> <strong>paliko</strong> </b> <span>savybės į</span> <b> <strong>penkiasdešimt %</strong> </b> <span>. Taip antrinis elementas nustatomas pirminio sudėtinio rodinio centre.</span></li><li value='4'><span>Naudokite</span> <b> <strong>transformuoti: išversti (-50%, -50%)</strong> </b> <span>centruoti antrinį elementą tiek horizontaliai, tiek vertikaliai.</span></li></ul><p dir='ltr'> <b> <strong>Pavyzdys:</strong> </b> <span>Šiame pavyzdyje parodyta, kaip centruoti tekstą div viduje, naudojant CSS transformavimo ypatybę.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centruokite tekstą horizontaliai ir vertikaliai div bloko pavadinime><style>.container { aukštis: 300 taškų; plotis: 645px; padėtis: santykinė; kraštinė: 2px vientisa juoda; } h1 { pozicija: absoliuti; viršuje: 50%; spalva: žalia; liko: 50%; transformuoti: išversti(-50%, -50%); } style> head> <body> <div> <h1>GeekforGeeksh1> 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="/java-arraylist">masyvo sąrašo metodai</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Apibendrinant galima pasakyti, kad pasirinktas požiūris priklausys nuo konkretaus naudojimo atvejo, suderinamumo su kitais elementais ir pageidaujamos dizaino estetikos. Taikant šiuos metodus galima pasiekti centre esantį teksto bloką įvairiuose maketuose ir dizainuose.</span></p> <br> <br></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="/linux-vi-editor/">Linux Vi Redaktorius</a> </li><li> <a href="/quick-sort/">Greitas Rūšiavimas</a> </li><li> <a href="/html-attributes/">Html-Atributai</a> </li><li> <a href="/physics-formulas/">Fizika-Formulės</a> </li><li> <a href="/top-10-list-world/">Top 10 Sąrašas – Pasaulis</a> </li><li> <a href="/medlife/">Medlife</a> </li><li> <a href="/java-timestamp-class/">Java Laiko Žymos Klasė</a> </li><li> <a href="/cpp-input-output/">Cpp-Input-Output</a> </li><li> <a href="/embedded-systems/">Įterptinės Sistemos</a> </li><li> <a href="/java-synchronization/">Java Sinchronizavimas</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Ką galima pagauti, bet ne mesti?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Kompiuterių mokslo portalas, skirtas geikams. Jame yra gerai parašyti, gerai apgalvoti ir gerai paaiškinti informatikos ir programavimo straipsniai, viktorinos ir praktikos / konkurencinio programavimo / įmonės interviu klausimai.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-can-you-catch-not-throw"> <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="/50-gen-z-slang-words-you-need-know">50+ Z kartos slengo žodžių, kuriuos reikia žinoti</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/joe-biden-net-worth-2024">Joe Bideno grynoji vertė 2024 m. (JAV prezidentas grynoji vertė)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-array">C masyvas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sridevi">Sridevi</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/line-symmetry">Simetrijos linija</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="/constructors-java">konstruktorius java</a>
</li><li><a href="/java-util-date">java naudojimo data</a>
</li><li><a href="/how-update-java">atnaujinama java</a>
</li><li><a href="/java-applet">programėlė</a>
</li><li><a href="/types-computer">kompiuterių tipai</a>
</li><li><a href="/loops-java">ciklo tipai</a>
</li><li><a href="/one-billion-million">kiek milijonų yra milijardas</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="//ar.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>
</body>
</html>