Teksta centrēšana gan horizontāli, gan vertikāli div blokā ir svarīgi, lai izveidotu vizuāli pievilcīgus izkārtojumus. Dažādas metodes, piemēram, flexbox, grid un CSS transformācijas, piedāvā risinājumus ar atšķirīgām priekšrocībām un trūkumiem. Šajā rakstā ir aplūkotas šīs izplatītās pieejas teksta centrēšanai div blokos.
Satura rādītājs
- Izmantojot Flexbox
- Izmantojot Režģi
- Izmantojot teksta līdzināšanu
- Izmantojot tabulas šūnu
- Pārveidošanas īpašuma izmantošana
Izmantojot Flexbox:
- Iestatiet vecāku konteineru uz displejs: flex; Tas ļauj izmantot a flexbox un pārvērš galveno konteineru par elastīgu konteineru.
- Izmantot attaisnot-saturs: centrs lai bērnelementu centrētu horizontāli vecākkonteinerā.
- Izmantot līdzināt vienumus: centrs lai centrētu pakārtoto elementu vertikāli vecākkonteinerā.
Piemērs: Šajā piemērā parādīts, kā centrēt tekstu div, izmantojot flexbox rekvizītu CSS .
HTML
Centrējiet tekstu horizontāli un vertikāli div bloka virsrakstā<style>body { text-align: center; } .container { augstums: 300 pikseļi; platums: 645 pikseļi; displejs: flex; attaisnot-saturs: centrs; izlīdzināt vienumus: centrs; apmale: 2px vienkrāsains melns; } h1 { krāsa: zaļa; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/skip-list-data-structure">izlaist sarakstu</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Izmantojot Režģi</span></h2><ul><li value='1'> <span>CSS režģis</span> <span>ir vēl viens populārs izkārtojuma rīks, kas ļauj izveidot sarežģītus un elastīgus režģa izkārtojumus.</span></li><li value='2'><span>Iestatiet vecāku konteineru uz</span> <b> <strong>displejs: režģis</strong> </b> <span>. Tas ļauj izmantot CSS režģi un pārvērš vecākkonteineru par režģa konteineru.</span></li><li value='3'><span>Izmantojiet</span> <b> <strong> </strong> </b> <b> <strong>vieta-preces: centrs</strong> </b> <span>īpašība, lai centrētu pakārtoto elementu gan horizontāli, gan vertikāli režģa šūnā. Šis īpašums ir saīsinājums abiem</span> <b> <strong>attaisnot-preces</strong> </b> <span>un</span> <b> <strong>izlīdzināt vienumus</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Šajā piemērā parādīts, kā centrēt tekstu div, izmantojot CSS režģa rekvizītu.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrējiet tekstu horizontāli un vertikāli div bloka virsrakstā<style>.container { augstums: 300 pikseļi; platums: 645 pikseļi; displejs: režģis; vieta-preces: centrs; apmale: 2px vienkrāsains melns; } h1 { krāsa: zaļa; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Izmantojot teksta līdzināšanu:</strong> </b> </h2><ul><li value='1'><span>The</span> <span>teksta līdzināšana</span> <span>Īpašums ir vienkāršs un saprotams veids, kā centrēt tekstu horizontāli div blokā.</span></li><li value='2'><span>Iestatiet vecāku konteineru uz</span> <b> <strong>teksta līdzināšana: centrā.</strong> </b> <span>Tādējādi bērnelements tiek centrēts horizontāli vecākkonteinerā.</span></li><li value='3'><span>Izmantot</span> <b> <strong>līnijas augstums:</strong> </b> <span>lai centrētu pakārtoto elementu vertikāli vecākkonteinerā. Vērtībai ir jābūt vienādai ar vecākkonteinera augstumu.</span></li></ul><p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Šajā piemērā parādīts, kā centrēt tekstu div, izmantojot CSS teksta līdzinājumu.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-enable-disable-developer-options-android">kā aizvērt izstrādātāja režīmu</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrējiet tekstu horizontāli un vertikāli div bloka virsrakstā<style>.container { augstums: 300 pikseļi; platums: 645 pikseļi; teksta līdzināšana: centrs; līnijas augstums: 400 pikseļi; apmale: 2px vienkrāsains melns; } h1 { krāsa: zaļa; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Izmantojot tabulas šūnu</span></h2><ul><li value='1'><span>Iestatiet vecāku konteineru uz</span> <b> <strong>displejs: tabula.</strong> </b> <span>Tas atdarina tabulas darbību.</span></li><li value='2'><span>Iestatiet bērna elementu uz</span> <b> <strong>displejs: tabula-šūna</strong> </b> <span>. Tas atdarina tabulas šūnas darbību.</span></li><li value='3'><span>Izmantot</span> <b> <strong>vertikālā izlīdzināšana: vidū</strong> </b> <span>lai centrētu pakārtoto elementu vertikāli vecākkonteinerā.</span></li><li value='4'><span>Izmantot</span> <b> <strong>teksta līdzināšana: centrā</strong> </b> <span>lai bērnelementu centrētu horizontāli vecākkonteinerā.</span></li></ul><p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Šajā piemērā parādīts, kā centrēt tekstu div, izmantojot CSS teksta tabulas šūnu.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrējiet tekstu horizontāli un vertikāli div bloka virsrakstā<style>.container { augstums: 300 pikseļi; platums: 645 pikseļi; displejs: tabula-šūna; teksta līdzināšana: centrs; vertikāli izlīdzināt: vidū; apmale: 2 pikseļi vienkrāsains melns; } h1 { krāsa: zaļa; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Pārveidošanas īpašuma izmantošana:</span></h2><ul><li value='1'><span>Iestatiet vecāku konteineru uz</span> <b> <strong>pozīcija: relatīvs.</strong> </b> <span>Tas ļauj izmantot absolūto pozicionēšanu bērna elementam.</span></li><li value='2'><span>Iestatiet bērna elementu uz</span> <b> <strong>pozīcija: absolūta.</strong> </b> <span>Tas ļauj izmantot absolūto pozicionēšanu bērna elementam.</span></li><li value='3'><span>Iestatiet bērna elementu</span> <b> <strong>tops</strong> </b> <span>un</span> <b> <strong>pa kreisi</strong> </b> <span>īpašības uz</span> <b> <strong>piecdesmit%</strong> </b> <span>. Tādējādi bērna elements tiek novietots vecākkonteinera centrā.</span></li><li value='4'><span>Izmantot</span> <b> <strong>pārveidot: tulkot (-50%, -50%)</strong> </b> <span>lai centrētu bērna elementu gan horizontāli, gan vertikāli.</span></li></ul><p dir='ltr'> <b> <strong>Piemērs:</strong> </b> <span>Šajā piemērā parādīts, kā centrēt tekstu div, izmantojot CSS transformācijas rekvizītu.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrējiet tekstu horizontāli un vertikāli div bloka virsrakstā<style>.container { augstums: 300 pikseļi; platums: 645 pikseļi; pozīcija: relatīvs; apmale: 2 pikseļi vienkrāsains melns; } h1 { pozīcija: absolūtā; augšā: 50%; krāsa: zaļa; pa kreisi: 50%; pārveidot: tulkot(-50%, -50%); } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Izvade:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-block-youtube-ads-android">bloķēt reklāmas youtube android</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Rezumējot, izvēlētā pieeja būs atkarīga no konkrētā lietošanas gadījuma, saderības ar citiem elementiem un vēlamās dizaina estētikas. Izmantojot šīs metodes, ir iespējams panākt centrētu teksta bloku dažādos izkārtojumos un dizainos.</span></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="/artificial-intelligence/">Mākslīgais Intelekts</a> </li><li> <a href="/amazon/">Amazon</a> </li><li> <a href="/java-system-class/">Java Sistēmas Klase</a> </li><li> <a href="/pwa-tutorial/">Pwa Apmācība</a> </li><li> <a href="/digital-electronics-implementations/">Digitālā Elektronika – Realizācijas</a> </li><li> <a href="/python-projects/">Python Projekti</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-Lineārā Algebra</a> </li><li> <a href="/linux-unix/">Linux-Unix</a> </li><li> <a href="/maths-class-6-cat/">Matemātika-6.Klase</a> </li><li> <a href="/nginx-tutorial/">Nginx Apmācība</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">Iteratīvā padziļinātā meklēšana (IDS) vai iteratīvā padziļinātā pirmā meklēšana (IDDFS)</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Iteratīvā padziļinātā meklēšana (IDS) vai iteratīvā padziļinātā pirmā meklēšana (IDDFS) ar apmācību, ievadu, mākslīgā intelekta vēsturi, AI, AI pārskatu, aģentu veidiem, viedais aģents, aģenta vide utt.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/iterative-deepening-search"> <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="/difference-between-maternal">Atšķirība starp māti un tēvu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-install-requests-python">Kā instalēt pieprasījumus Python — operētājsistēmai Windows, Linux, Mac</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-create-file">Linux Izveidot failu</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/git-log">Git žurnāls</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/square-root/">Kvadrātsakne</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="/java-map-interface">karte java</a>
</li><li><a href="/uri-vs-url-difference-between-uri">kas ir uri</a>
</li><li><a href="/type-adobe-illustrator">augšraksts ilustratorā</a>
</li><li><a href="/fiscal-quarters-q1-q2">ceturksnis biznesā</a>
</li><li><a href="/java-convert-int-double">pārvērst par dubulto 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="//nl.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>