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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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> <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>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><!--//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="/react-questions/">Reacționează-Întrebări</a> </li><li> <a href="/acceptable-use-policy/">Politica De Utilizare Acceptabilă</a> </li><li> <a href="/english-blogs/">Bloguri Engleze</a> </li><li> <a href="/http-headers/">Antete Http</a> </li><li> <a href="/geometry/">Geometrie</a> </li><li> <a href="/photoshop-tutorial/">Tutorial Photoshop</a> </li><li> <a href="/c-inheritance/">C++-Moștenire</a> </li><li> <a href="/java-constructors/">Java-Constructori</a> </li><li> <a href="/compiler-tutorial/">Tutorial Compilator</a> </li><li> <a href="/c-manipulator/">Manipulator C++</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Diferența dintre trebuie și ar trebui</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Trebuie vs Ar trebui | Diferența dintre Must și Should cu o listă de diferențe de top și exemple în timp real, inclusiv imagini, câine, pisică, brut, net, java, bază de date, știință, general, engleză etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-must"> <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="/does-your-psat-score-qualify-1311536">Scorul tău PSAT se califică pentru meritul național?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-machine-language">Ce este limbajul mașinii?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sat-percentiles-score-rankings-131378">Percentile SAT și clasamente ale scorurilor (Actualizat 2024)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-italicize-text-css">Cum se scriu cu italice text în CSS?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-method-references">Referințe pentru metoda Java</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="/java-string">metode string java</a>
</li><li><a href="/java-jtable">javabil</a>
</li><li><a href="/how-play-imessage-games-an-android-phone">jocuri cu mesaje pe Android</a>
</li><li><a href="/round-robin-scheduling-algorithm">programare round robin</a>
</li><li><a href="/java-try-catch-block">încercați să prindeți blocul java</a>
</li><li><a href="/identifiers-java">identificatori validi în 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 Toate Drepturile Rezervate | <a href="//uk.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>
</body>
</html>