Centrera text både horisontellt och vertikalt inuti ett div-block är viktigt för att skapa visuellt tilltalande layouter. Olika metoder, såsom flexbox-, grid- och CSS-transformationer, erbjuder lösningar med tydliga fördelar och nackdelar. Den här artikeln undersöker dessa vanliga metoder för att uppnå textcentrering inom div-block.
Innehållsförteckning
Använda Flexbox:
- Ställ in den överordnade behållaren till display: flex; Detta möjliggör användningen av en flexbox och förvandlar föräldrabehållaren till en flexbehållare.
- Använda sig av motivera-innehåll: centrera för att centrera det underordnade elementet horisontellt i den överordnade behållaren.
- Använda sig av align-objekt: centrera för att centrera det underordnade elementet vertikalt i den överordnade behållaren.
Exempel: Det här exemplet visar hur man centrerar text inuti en div med hjälp av flexbox-egenskapen för CSS .
HTML
Centrera text horisontellt och vertikalt inuti en div-blocktitel><style>body { text-align: center; } .container { höjd: 300px; bredd: 645px; display: flex; motivera-innehåll: center; align-items: center; kant: 2px helt svart; } h1 { färg: grön; } stil> huvud> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/c-functions">funktioner i c</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Använda Grid</span></h2><ul><li value='1'> <span>CSS-rutnät</span> <span>är ett annat populärt layoutverktyg som gör att du kan skapa komplexa och flexibla rutnätsbaserade layouter.</span></li><li value='2'><span>Ställ in den överordnade behållaren till</span> <b> <strong>display: rutnät</strong> </b> <span>. Detta möjliggör användningen av ett CSS-rutnät och förvandlar den överordnade behållaren till en rutnätsbehållare.</span></li><li value='3'><span>Använd</span> <b> <strong> </strong> </b> <b> <strong>platsobjekt: center</strong> </b> <span>egenskap för att centrera det underordnade elementet både horisontellt och vertikalt i rutnätscellen. Den här egenskapen är en stenografi för båda</span> <b> <strong>motivera-objekt</strong> </b> <span>och</span> <b> <strong>align-objekt</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Det här exemplet visar hur man centrerar text inuti en div med hjälp av grid-egenskapen för CSS.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/java-break-statement">bryta java</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrera text horisontellt och vertikalt inuti en div-blocktitel><style>.container { höjd: 300px; bredd: 645px; display: rutnät; platsobjekt: center; kant: 2px helt svart; } h1 { färg: grön; } stil> huvud> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Använda Text Align:</strong> </b> </h2><ul><li value='1'><span>De</span> <span>textjustera</span> <span>egenskap är ett enkelt och okomplicerat sätt att centrera text horisontellt i ett div-block.</span></li><li value='2'><span>Ställ in den överordnade behållaren till</span> <b> <strong>text-align: center.</strong> </b> <span>Detta centrerar det underordnade elementet horisontellt i den överordnade behållaren.</span></li><li value='3'><span>Använda sig av</span> <b> <strong>radavstånd:</strong> </b> <span>för att centrera det underordnade elementet vertikalt i den överordnade behållaren. Värdet på ska vara lika med höjden på den överordnade behållaren.</span></li></ul><p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Det här exemplet visar hur man centrerar text inuti en div med hjälp av textjustering i CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrera text horisontellt och vertikalt inuti en div-blocktitel><style>.container { höjd: 300px; bredd: 645px; text-align: center; linjehöjd: 400px; kant: 2px helt svart; } h1 { färg: grön; } stil> huvud> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Använda tabellcell</span></h2><ul><li value='1'><span>Ställ in den överordnade behållaren till</span> <b> <strong>display: tabell.</strong> </b> <span>Detta emulerar beteendet hos en tabell.</span></li><li value='2'><span>Ställ in underordnat element till</span> <b> <strong>display: tabell-cell</strong> </b> <span>. Detta emulerar beteendet hos en tabellcell.</span></li><li value='3'><span>Använda sig av</span> <b> <strong>vertikal-justera: mitten</strong> </b> <span>för att centrera det underordnade elementet vertikalt i den överordnade behållaren.</span></li><li value='4'><span>Använda sig av</span> <b> <strong>text-align: center</strong> </b> <span>för att centrera det underordnade elementet horisontellt i den överordnade behållaren.</span></li></ul><p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Det här exemplet visar hur man centrerar text inuti en div med hjälp av texttabellcellen i CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrera text horisontellt och vertikalt inuti en div-blocktitel><style>.container { höjd: 300px; bredd: 645px; display: tabell-cell; text-align: center; vertikal-align: mitten; kant: 2px helt svart; } h1 { färg: grön; } stil> huvud> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Använda Transform Property:</span></h2><ul><li value='1'><span>Ställ in den överordnade behållaren till</span> <b> <strong>position: relativ.</strong> </b> <span>Detta möjliggör användning av absolut positionering för det underordnade elementet.</span></li><li value='2'><span>Ställ in underordnat element till</span> <b> <strong>position: absolut.</strong> </b> <span>Detta möjliggör användning av absolut positionering för det underordnade elementet.</span></li><li value='3'><span>Ställ in det underordnade elementets</span> <b> <strong>topp</strong> </b> <span>och</span> <b> <strong>vänster</strong> </b> <span>fastigheter till</span> <b> <strong>femtio%</strong> </b> <span>. Detta placerar det underordnade elementet i mitten av den överordnade behållaren.</span></li><li value='4'><span>Använda sig av</span> <b> <strong>transform: translate(-50%, -50%)</strong> </b> <span>för att centrera det underordnade elementet både horisontellt och vertikalt.</span></li></ul><p dir='ltr'> <b> <strong>Exempel:</strong> </b> <span>Det här exemplet visar hur man centrerar text inuti en div med hjälp av transformegenskapen för CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrera text horisontellt och vertikalt inuti en div-blocktitel><style>.container { höjd: 300px; bredd: 645px; position: relativ; kant: 2px helt svart; } h1 { position: absolut; topp: 50%; färg: grön; vänster: 50%; transform: translate(-50%, -50%); } stil> huvud> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Produktion:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/svn-checkout">vad är svn kassa</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Sammanfattningsvis kommer det valda tillvägagångssättet att bero på det specifika användningsfallet, kompatibiliteten med andra element och den önskade designestetiken. Med dessa metoder är det möjligt att uppnå ett centrerat textblock i en mängd olika layouter och design.</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="">Kategori</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-multithreading/">Java Multithreading</a> </li><li> <a href="/network-layer/">Nätverkslager</a> </li><li> <a href="/python-numpy/">Python-Numpy</a> </li><li> <a href="/project/">Projekt</a> </li><li> <a href="/java-applet/">Java-Applet</a> </li><li> <a href="/exception-handling/">Undantagshantering</a> </li><li> <a href="/software-engineering/">Mjukvaruutveckling</a> </li><li> <a href="/prolog-tutorial/">Handledning För Prolog</a> </li><li> <a href="/quotes/">Citat</a> </li><li> <a href="/java-classes/">Java-Klasser</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">Git Lägg till</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Git Add with Git Tutorial, Git Introduction, Git, Vad är Git, GitHub, Vad är GitHub, Git vs GitHub, Git Mercurial, Installation av Git för Windows, Installation Git för Ubuntu, Git Environment Setup, Git Command Line Tools, Git Tools , etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/git-add"> <i class="fa fa-external-link"></i> Läs Mer</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Intressanta Artiklar</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/complete-list-which-colleges-require-act-writing-1311000">Komplett lista: Vilka högskolor kräver ACT-skrivning?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spy-number-java">Spionnummer i Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/movie-reviews/">Filmrecensioner</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/shell/">Skal</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/crontab-linux-with-examples">'crontab' i Linux med exempel</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ära Inlägg</h2>
<div class="content">
<ul class="list"> <li><a href="/ankita-dave">ankita dave</a>
</li><li><a href="/gimp-deselect">gimp hur man avmarkerar</a>
</li><li><a href="/java-math-class">java matematik klass</a>
</li><li><a href="/lexicographical-order-java">lexikografisk ordning</a>
</li><li><a href="/java-convert-int-string">java int i sträng</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 Alla Rättigheter Förbehållna | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Ansvarsfriskrivning</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Om Oss</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Sekretesspolicy</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>