Centrarea textului atât pe orizontală, cât și pe verticală în interiorul unui bloc div este important pentru crearea unor machete atractive din punct de vedere vizual. Diverse metode, cum ar fi flexbox, grid și transformări CSS, oferă soluții cu avantaje și dezavantaje distincte. Acest articol examinează aceste abordări comune pentru a realiza centrarea textului în blocurile div.
Cuprins
- Folosind Flexbox
- Folosind Grid
- Folosind Text Align
- Folosind celula tabelului
- Utilizarea proprietății Transform
Folosind Flexbox:
- Setați containerul părinte la display: flex; Acest lucru permite utilizarea a flexbox și transformă containerul părinte într-un container flexibil.
- Utilizare justificare-conținut: centru pentru a centra elementul copil orizontal în interiorul containerului părinte.
- Utilizare elemente de aliniere: centru pentru a centra elementul copil vertical în interiorul containerului părinte.
Exemplu: Acest exemplu arată cum să centrați textul într-un div folosind proprietatea flexbox a CSS .
HTML
Centrați textul pe orizontală și pe verticală în interiorul unui titlu de bloc div><style>body { text-align: center; } .container { înălțime: 300px; latime: 645px; display: flex; justificare-conținut: centru; alinierea elementelor: centru; chenar: 2px negru solid; } h1 { culoare: verde; } stil> cap> <body> <div> <h1>GeekforGeeksh1> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-try-catch-block">java catch try</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Folosind Grid</span></h2><ul><li value='1'> <span>Grilă CSS</span> <span>este un alt instrument de aspect popular care vă permite să creați machete complexe și flexibile bazate pe grilă.</span></li><li value='2'><span>Setați containerul părinte la</span> <b> <strong>afișaj: grilă</strong> </b> <span>. Acest lucru permite utilizarea unei grile CSS și transformă containerul părinte într-un container grid.</span></li><li value='3'><span>Folosește</span> <b> <strong> </strong> </b> <b> <strong>obiecte-loc: centru</strong> </b> <span>proprietate de a centra elementul copil atât orizontal, cât și vertical în interiorul celulei grilei. Această proprietate este o prescurtare pentru ambele</span> <b> <strong>justificare-articole</strong> </b> <span>și</span> <b> <strong>alinierea elementelor</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Acest exemplu arată cum să centrați textul într-un div folosind proprietatea grid a CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrați textul pe orizontală și pe verticală în interiorul unui titlu de bloc div><style>.container { inaltime: 300px; latime: 645px; afisare: grila; obiecte-loc: centru; chenar: 2px negru solid; } h1 { culoare: verde; } stil> cap> <body> <div> <h1>GeekforGeeksh1> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Folosind Text Align:</strong> </b> </h2><ul><li value='1'><span>The</span> <span>aliniere text</span> <span>proprietatea este o modalitate simplă și directă de a centra textul orizontal într-un bloc div.</span></li><li value='2'><span>Setați containerul părinte la</span> <b> <strong>text-align: centru.</strong> </b> <span>Acest lucru centrează elementul copil orizontal în containerul părinte.</span></li><li value='3'><span>Utilizare</span> <b> <strong>inaltimea liniei:</strong> </b> <span>pentru a centra elementul copil vertical în interiorul containerului părinte. Valoarea lui ar trebui să fie egală cu înălțimea containerului părinte.</span></li></ul><p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Acest exemplu arată cum să centrați textul într-un div folosind alinierea textului CSS.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-sort-an-array-java">sortare matrice java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrați textul pe orizontală și pe verticală în interiorul unui titlu de bloc div><style>.container { inaltime: 300px; latime: 645px; text-align: centru; înălțimea liniei: 400px; chenar: 2px negru solid; } h1 { culoare: verde; } stil> cap> <body> <div> <h1>GeekforGeeksh1> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Folosind celula tabelului</span></h2><ul><li value='1'><span>Setați containerul părinte la</span> <b> <strong>afisare: tabel.</strong> </b> <span>Aceasta emulează comportamentul unui tabel.</span></li><li value='2'><span>Setați elementul copil la</span> <b> <strong>afișare: tabel-celulă</strong> </b> <span>. Aceasta emulează comportamentul unei celule de tabel.</span></li><li value='3'><span>Utilizare</span> <b> <strong>vertical-align: mijloc</strong> </b> <span>pentru a centra elementul copil vertical în interiorul containerului părinte.</span></li><li value='4'><span>Utilizare</span> <b> <strong>text-align: centru</strong> </b> <span>pentru a centra elementul copil orizontal în interiorul containerului părinte.</span></li></ul><p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Acest exemplu arată cum să centrați textul într-un div folosind celula tabelului de text din CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrați textul pe orizontală și pe verticală în interiorul unui titlu de bloc div><style>.container { inaltime: 300px; latime: 645px; afisare: tabel-celula; text-align: centru; vertical-align: mijloc; chenar: 2px negru solid; } h1 { culoare: verde; } stil> cap> <body> <div> <h1>GeekforGeeksh1> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Folosind proprietatea Transform:</span></h2><ul><li value='1'><span>Setați containerul părinte la</span> <b> <strong>poziție: relativă.</strong> </b> <span>Acest lucru permite utilizarea poziționării absolute pentru elementul copil.</span></li><li value='2'><span>Setați elementul copil la</span> <b> <strong>poziție: absolută.</strong> </b> <span>Acest lucru permite utilizarea poziționării absolute pentru elementul copil.</span></li><li value='3'><span>Setați elementul copil</span> <b> <strong>top</strong> </b> <span>și</span> <b> <strong>stânga</strong> </b> <span>proprietăți la</span> <b> <strong>cincizeci%</strong> </b> <span>. Acest lucru poziționează elementul copil în centrul containerului părinte.</span></li><li value='4'><span>Utilizare</span> <b> <strong>transforma: traduce (-50%, -50%)</strong> </b> <span>pentru a centra elementul copil atât pe orizontală, cât și pe verticală.</span></li></ul><p dir='ltr'> <b> <strong>Exemplu:</strong> </b> <span>Acest exemplu arată cum să centrați textul într-un div folosind proprietatea de transformare a CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrați textul pe orizontală și pe verticală în interiorul unui titlu de bloc div><style>.container { inaltime: 300px; latime: 645px; poziție: relativă; chenar: 2px negru solid; } h1 { poziție: absolut; sus: 50%; culoare: verde; stânga: 50%; transforma: traduce(-50%, -50%); } stil> cap> <body> <div> <h1>GeekforGeeksh1> div> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>Ieșire:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-convert-string-int">cum se transformă str în int</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Pe scurt, abordarea aleasă va depinde de cazul specific de utilizare, de compatibilitatea cu alte elemente și de estetica de design dorită. Cu aceste metode, este posibil să se realizeze un bloc de text centrat într-o varietate de machete și modele.</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-list/">Lista-Python</a> </li><li> <a href="/java-random-class/">Clasa Aleatorie Java</a> </li><li> <a href="/spring-tutorial/">Tutorial De Primăvară</a> </li><li> <a href="/python-operators/">Operatori Python</a> </li><li> <a href="/shortest-path/">Cea Mai Scurtă Cale</a> </li><li> <a href="/python-list-programs/">Lista-Programe Python</a> </li><li> <a href="/c-data-types/">Tipuri De Date C</a> </li><li> <a href="/xml-tutorial/">Tutorial Xml</a> </li><li> <a href="/gimp-tutorial/">Tutorial Gimp</a> </li><li> <a href="/embedded-systems/">Sisteme Integrate</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">Funcționarea HashMap în Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Funcționarea HashMap în Java | Cum funcționează HashMap în Java cu HashSet, LinkedHashSet, TreeSet, HashMap, TreeMap, ArrayList, LinkedList, Queue, PriorityQueue, ArrayDeque etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/working-hashmap-java"> <i class="fa fa-external-link"></i> Citeşte Mai Mult</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articole Interesante</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/installation-mac/">Instalare Pe Mac</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/recursive-functions-discrete-mathematics">Funcții recursive în matematică discretă</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/graph-isomorphism-discrete-mathematics">Izomorfism grafic în matematică discretă</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-sat-adaptive-testing-1311122">Ce este testarea adaptivă SAT? Cum functioneazã?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/asp-net-mvc-routing">Rutare ASP.NET MVC</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">Posturi Populare</h2>
<div class="content">
<ul class="list"> <li><a href="/fiscal-quarters-q1-q2">când începe q2</a>
</li><li><a href="/algebra-sets">algebra multimilor</a>
</li><li><a href="/java-localdate-class">localdate</a>
</li><li><a href="/spring-mvc-tutorial">mvc în cadru de primăvară</a>
</li><li><a href="/bash-if-else">bash dacă altceva</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 Toate Drepturile Rezervate | <a href="//tr.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Declinare A Răspunderii</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Despre Noi</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica De Confidențialitate</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>