Vycentrovanie textu horizontálne aj vertikálne vo vnútri bloku div je dôležité pre vytváranie vizuálne príťažlivých rozložení. Rôzne metódy, ako napríklad flexbox, grid a CSS transformácie, ponúkajú riešenia s výraznými výhodami a nevýhodami. Tento článok skúma tieto bežné prístupy na dosiahnutie centrovania textu v rámci blokov div.
Obsah
- Používanie Flexboxu
- Pomocou mriežky
- Použitie zarovnania textu
- Pomocou bunky tabuľky
- Použitie Transform Property
Používanie Flexboxu:
- Nastavte rodičovský kontajner na displej: flex; To umožňuje použitie a flexbox a premení rodičovský kontajner na flexibilný kontajner.
- Použite ospravedlniť-obsah: stred na vycentrovanie podriadeného prvku vodorovne v rámci nadradeného kontajnera.
- Použite align-items: center na vertikálne vycentrovanie podriadeného prvku v rámci nadradeného kontajnera.
Príklad: Tento príklad ukazuje, ako vycentrovať text vo vnútri prvku div pomocou vlastnosti flexbox of CSS .
HTML
Vodorovne a zvisle vycentrujte text do názvu bloku div><style>body { text-align: center; } .kontajner { vyska: 300px; šírka: 645px; displej: flex; zdôvodniť-obsah: stred; align-items: center; orámovanie: 2px plná čierna; } h1 { farba: zelená; } štýl> hlava> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-math-sqrt-method">sqrt java matematika</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Pomocou mriežky</span></h2><ul><li value='1'> <span>CSS mriežka</span> <span>je ďalší populárny nástroj na rozloženie, ktorý vám umožňuje vytvárať zložité a flexibilné rozloženia založené na mriežke.</span></li><li value='2'><span>Nastavte rodičovský kontajner na</span> <b> <strong>displej: mriežka</strong> </b> <span>. To umožňuje použitie mriežky CSS a premení nadradený kontajner na kontajner mriežky.</span></li><li value='3'><span>Použi</span> <b> <strong> </strong> </b> <b> <strong>miesto-položky: stred</strong> </b> <span>vlastnosť na vycentrovanie podriadeného prvku horizontálne aj vertikálne v rámci bunky mriežky. Táto vlastnosť je skratka pre oboch</span> <b> <strong>zarovnať-položky</strong> </b> <span>a</span> <b> <strong>align-items</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Príklad:</strong> </b> <span>Tento príklad ukazuje, ako vycentrovať text vo vnútri prvku div pomocou vlastnosti grid CSS.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/linux-export-command">čo je export v linuxe</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Vodorovne a zvisle vycentrujte text do názvu bloku div><style>.kontajner { vyska: 300px; šírka: 645px; displej: mriežka; miesto-položky: centrum; orámovanie: 2px plná čierna; } h1 { farba: zelená; } štýl> hlava> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Použitie zarovnania textu:</strong> </b> </h2><ul><li value='1'><span>The</span> <span>zarovnanie textu</span> <span>vlastnosť je jednoduchý a priamočiary spôsob, ako horizontálne vycentrovať text v rámci bloku div.</span></li><li value='2'><span>Nastavte rodičovský kontajner na</span> <b> <strong>zarovnanie textu: na stred.</strong> </b> <span>Toto vycentruje podradený prvok horizontálne v rámci nadradeného kontajnera.</span></li><li value='3'><span>Použite</span> <b> <strong>výška riadku:</strong> </b> <span>na vertikálne vycentrovanie podriadeného prvku v rámci nadradeného kontajnera. Hodnota by sa mala rovnať výške nadradeného kontajnera.</span></li></ul><p dir='ltr'> <b> <strong>Príklad:</strong> </b> <span>Tento príklad ukazuje, ako vycentrovať text vo vnútri prvku div pomocou zarovnania textu CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Vodorovne a zvisle vycentrujte text do názvu bloku div><style>.kontajner { vyska: 300px; šírka: 645px; text-align: center; line-height: 400px; orámovanie: 2px plná čierna; } h1 { farba: zelená; } štýl> hlava> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Pomocou bunky tabuľky</span></h2><ul><li value='1'><span>Nastavte rodičovský kontajner na</span> <b> <strong>displej: tabuľka.</strong> </b> <span>Toto napodobňuje správanie tabuľky.</span></li><li value='2'><span>Nastavte podradený prvok na</span> <b> <strong>displej: tabuľka-bunka</strong> </b> <span>. Toto emuluje správanie bunky tabuľky.</span></li><li value='3'><span>Použite</span> <b> <strong>vertikálne zarovnať: stred</strong> </b> <span>na vertikálne vycentrovanie podriadeného prvku v rámci nadradeného kontajnera.</span></li><li value='4'><span>Použite</span> <b> <strong>zarovnanie textu: na stred</strong> </b> <span>na vycentrovanie podriadeného prvku vodorovne v rámci nadradeného kontajnera.</span></li></ul><p dir='ltr'> <b> <strong>Príklad:</strong> </b> <span>Tento príklad ukazuje, ako vycentrovať text vo vnútri prvku div pomocou bunky textovej tabuľky CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Vodorovne a zvisle vycentrujte text do názvu bloku div><style>.kontajner { vyska: 300px; šírka: 645px; displej: tabuľka-bunka; text-align: center; vertikálne zarovnať: stred; orámovanie: 2px plná čierna; } h1 { farba: zelená; } štýl> hlava> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Použitie vlastnosti transformácie:</span></h2><ul><li value='1'><span>Nastavte rodičovský kontajner na</span> <b> <strong>poloha: relatívna.</strong> </b> <span>To umožňuje použitie absolútneho umiestnenia pre podradený prvok.</span></li><li value='2'><span>Nastavte podradený prvok na</span> <b> <strong>pozícia: absolútna.</strong> </b> <span>To umožňuje použitie absolútneho umiestnenia pre podradený prvok.</span></li><li value='3'><span>Nastavte podradený prvok</span> <b> <strong>top</strong> </b> <span>a</span> <b> <strong>vľavo</strong> </b> <span>vlastnosti do</span> <b> <strong>päťdesiat percent</strong> </b> <span>. Toto umiestni podriadený prvok do stredu nadradeného kontajnera.</span></li><li value='4'><span>Použite</span> <b> <strong>transform: translate(-50%, -50%)</strong> </b> <span>na vycentrovanie podriadeného prvku horizontálne aj vertikálne.</span></li></ul><p dir='ltr'> <b> <strong>Príklad:</strong> </b> <span>Tento príklad ukazuje, ako vycentrovať text vo vnútri prvku div pomocou vlastnosti transform CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Vodorovne a zvisle vycentrujte text do názvu bloku div><style>.kontajner { vyska: 300px; šírka: 645px; poloha: relatívna; orámovanie: 2px plná čierna; } h1 { poloha: absolútna; horná časť: 50 %; farba: zelená; vľavo: 50 %; transform: translate(-50%, -50%); } štýl> hlava> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Výkon:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/difference-between-object">trieda vs objekt v jave</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Stručne povedané, zvolený prístup bude závisieť od konkrétneho prípadu použitia, kompatibility s inými prvkami a požadovanej estetiky dizajnu. Pomocou týchto metód je možné dosiahnuť vycentrovaný textový blok v rôznych rozloženiach a dizajnoch.</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="">Kategórie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-new-features/">Nové Funkcie Java</a> </li><li> <a href="/python-input-output/">Python-Input-Output</a> </li><li> <a href="/python-pandas-dataframe/">Python Pandas-Dataframe</a> </li><li> <a href="/linux-man-pages/">Linux Man Pages</a> </li><li> <a href="/jdbc/">Jdbc</a> </li><li> <a href="/dsa-tutorials/">Návody Dsa</a> </li><li> <a href="/computer/">Počítač</a> </li><li> <a href="/web-services-tutorial/">Návod Na Webové Služby</a> </li><li> <a href="/commerce-difference-between/">Obchod - Rozdiel Medzi</a> </li><li> <a href="/java-sortedset/">Java Sortedset</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">GIMP Zmeňte farby</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> GIMP Zmeňte farby pomocou toho, čo je gimp, gimp vs photoshop, nainštalujte gimp, ponuku súborov gimp, nástroje gimp, návod na gimp, funkcie gimpu, verzie gimpu, vyberte ponuku, ponuku zobrazenia, ponuku obrázkov atď.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/gimp-change-colors"> <i class="fa fa-external-link"></i> Čítajte Viac</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Zaujímavé Články</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/whats-good-psat-score-131726">Aké je dobré skóre PSAT pre druháka?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/randint-function-python">Funkcia randint() v Pythone</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linux-unix/">Linux-unix</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-math-class">Java Matematická trieda</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string">Java reťazec</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árne Príspevky</h2>
<div class="content">
<ul class="list"> <li><a href="/strikethrough-markdown">prečiarknutie</a>
</li><li><a href="/how-read-csv-file-java">csv súbor čítať java</a>
</li><li><a href="/java-convert-string-int">previesť str na int</a>
</li><li><a href="/javascript-comment">javascriptový komentár</a>
</li><li><a href="/von-neumann-model">von Neumannovej architektúry</a>
</li><li><a href="/one-billion-million">koľko miliónov je v miliarde</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 Všetky Práva Vyhradené | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov</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>