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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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> <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>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><!--//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="/tensorflow-tutorial/">Tensorflow Apmācība</a> </li><li> <a href="/matrix/">Matrica</a> </li><li> <a href="/javascript-misc/">Javascript — Dažādi</a> </li><li> <a href="/logarithms/">Logaritmi</a> </li><li> <a href="/java-mail-tutorial/">Java Pasta Apmācība</a> </li><li> <a href="/analog-communication/">Analogā Komunikācija</a> </li><li> <a href="/javascript-array/">Javascript-Masīvs</a> </li><li> <a href="/spring-tutorial/">Pavasara Apmācība</a> </li><li> <a href="/big-endian/">Lielais Endians</a> </li><li> <a href="/differences/">Atšķirības</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">getline (virkne) valodā C++</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Datorzinātņu portāls dīķiem. Tajā ir labi uzrakstīti, pārdomāti un labi izskaidroti raksti par datorzinātnēm un programmēšanu, viktorīnas un prakses/konkurētspējīgas programmēšanas/uzņēmuma intervijas jautājumi.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/getline-c"> <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="/minecraft-circle-generator-pixelated-circle-generator">Minecraft apļa ģenerators - pikseļu apļa ģenerators</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spring-tutorial/">Pavasara Apmācība</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-java">Kas ir Java?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/does-speed-reading-work-1311100">Vai ātrlasīšana darbojas?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-static">C++ statisks</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="/final-keyword-java">java beigas</a>
</li><li><a href="/java-logo">java logotips</a>
</li><li><a href="/save-json-file-python">python ierakstiet json failā</a>
</li><li><a href="/react-table">reaģēt-tabula</a>
</li><li><a href="/two-dimensional-array-c">c programma divdimensiju masīvam</a>
</li><li><a href="/java-string-substring">virknes apakšvirkne</a>
</li><li><a href="/difference-between-mb">gb pret mb</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="//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>