Zentrieren Sie Text sowohl horizontal als auch vertikal innerhalb eines Div-Blocks ist wichtig für die Erstellung optisch ansprechender Layouts. Verschiedene Methoden wie Flexbox-, Grid- und CSS-Transformationen bieten Lösungen mit unterschiedlichen Vor- und Nachteilen. In diesem Artikel werden diese gängigen Ansätze zum Erreichen einer Textzentrierung innerhalb von Div-Blöcken untersucht.
Inhaltsverzeichnis
- Flexbox verwenden
- Raster verwenden
- Verwenden der Textausrichtung
- Tabellenzelle verwenden
- Verwenden der Transformationseigenschaft
Verwendung von Flexbox:
- Legen Sie den übergeordneten Container fest auf Anzeige: Flex; Dies ermöglicht die Verwendung von a Flexbox und verwandelt den übergeordneten Container in einen Flex-Container.
- Verwenden rechtfertigen-Inhalt: Mitte um das untergeordnete Element horizontal im übergeordneten Container zu zentrieren.
- Verwenden align-items: zentrieren um das untergeordnete Element vertikal im übergeordneten Container zu zentrieren.
Beispiel: Dieses Beispiel zeigt, wie Sie mithilfe der Flexbox-Eigenschaft von Text innerhalb eines Div zentrieren CSS .
HTML
Zentrieren Sie Text horizontal und vertikal innerhalb eines Div-Blocktitels><style>body { text-align: center; } .container { Höhe: 300px; Breite: 645px; Anzeige: Flex; rechtfertigen-Inhalt: Mitte; align-items: center; Rand: 2 Pixel einfarbig schwarz; } h1 { Farbe: grün; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/mark-zuckerberg">Mark Zuckerberg Ausbildung</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Raster verwenden</span></h2><ul><li value='1'> <span>CSS-Raster</span> <span>ist ein weiteres beliebtes Layout-Tool, mit dem Sie komplexe und flexible rasterbasierte Layouts erstellen können.</span></li><li value='2'><span>Legen Sie den übergeordneten Container fest auf</span> <b> <strong>Anzeige: Raster</strong> </b> <span>. Dies ermöglicht die Verwendung eines CSS-Grids und verwandelt den übergeordneten Container in einen Grid-Container.</span></li><li value='3'><span>Benutzen Sie die</span> <b> <strong> </strong> </b> <b> <strong>Ortselemente: Mitte</strong> </b> <span>Eigenschaft, um das untergeordnete Element sowohl horizontal als auch vertikal innerhalb der Rasterzelle zu zentrieren. Diese Eigenschaft ist eine Abkürzung für beides</span> <b> <strong>rechtfertigen-Elemente</strong> </b> <span>Und</span> <b> <strong>align-items</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>Dieses Beispiel zeigt, wie Sie mithilfe der Grid-Eigenschaft von CSS Text innerhalb eines Div zentrieren.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Zentrieren Sie Text horizontal und vertikal innerhalb eines Div-Blocktitels><style>.container { Höhe: 300px; Breite: 645px; Anzeige: Raster; Ortselemente: Mitte; Rand: 2 Pixel einfarbig schwarz; } h1 { Farbe: grün; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Verwenden der Textausrichtung:</strong> </b> </h2><ul><li value='1'><span>Der</span> <span>Textausrichtung</span> <span>Die Eigenschaft ist eine einfache und unkomplizierte Möglichkeit, Text innerhalb eines Div-Blocks horizontal zu zentrieren.</span></li><li value='2'><span>Legen Sie den übergeordneten Container fest auf</span> <b> <strong>Textausrichtung: Mitte.</strong> </b> <span>Dadurch wird das untergeordnete Element horizontal im übergeordneten Container zentriert.</span></li><li value='3'><span>Verwenden</span> <b> <strong>Zeilenhöhe:</strong> </b> <span>um das untergeordnete Element vertikal im übergeordneten Container zu zentrieren. Der Wert sollte der Höhe des übergeordneten Containers entsprechen.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>Dieses Beispiel zeigt, wie man Text innerhalb eines Div mithilfe der Textausrichtung von CSS zentriert.</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/kat-timpf">Kat Timpf Schwester</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Zentrieren Sie Text horizontal und vertikal innerhalb eines Div-Blocktitels><style>.container { Höhe: 300px; Breite: 645px; Textausrichtung: Mitte; Zeilenhöhe: 400px; Rand: 2 Pixel einfarbig schwarz; } h1 { Farbe: grün; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>Tabellenzelle verwenden</span></h2><ul><li value='1'><span>Legen Sie den übergeordneten Container fest auf</span> <b> <strong>Anzeige: Tisch.</strong> </b> <span>Dies emuliert das Verhalten einer Tabelle.</span></li><li value='2'><span>Setzen Sie das untergeordnete Element auf</span> <b> <strong>Anzeige: Tabellenzelle</strong> </b> <span>. Dies emuliert das Verhalten einer Tabellenzelle.</span></li><li value='3'><span>Verwenden</span> <b> <strong>vertikal ausrichten: Mitte</strong> </b> <span>um das untergeordnete Element vertikal im übergeordneten Container zu zentrieren.</span></li><li value='4'><span>Verwenden</span> <b> <strong>Textausrichtung: Mitte</strong> </b> <span>um das untergeordnete Element horizontal im übergeordneten Container zu zentrieren.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>Dieses Beispiel zeigt, wie man Text innerhalb eines Div mithilfe der Texttabellenzelle von CSS zentriert.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Zentrieren Sie Text horizontal und vertikal innerhalb eines Div-Blocktitels><style>.container { Höhe: 300px; Breite: 645px; Anzeige: Tabellenzelle; Textausrichtung: Mitte; vertikal ausrichten: Mitte; Rand: 2 Pixel einfarbig schwarz; } h1 { Farbe: grün; } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Verwenden der Transformationseigenschaft:</span></h2><ul><li value='1'><span>Legen Sie den übergeordneten Container fest auf</span> <b> <strong>Position: relativ.</strong> </b> <span>Dies ermöglicht die Verwendung einer absoluten Positionierung für das untergeordnete Element.</span></li><li value='2'><span>Setzen Sie das untergeordnete Element auf</span> <b> <strong>Position: absolut.</strong> </b> <span>Dies ermöglicht die Verwendung einer absoluten Positionierung für das untergeordnete Element.</span></li><li value='3'><span>Legen Sie die untergeordneten Elemente fest</span> <b> <strong>Spitze</strong> </b> <span>Und</span> <b> <strong>links</strong> </b> <span>Eigenschaften zu</span> <b> <strong>fünfzig%</strong> </b> <span>. Dadurch wird das untergeordnete Element in der Mitte des übergeordneten Containers positioniert.</span></li><li value='4'><span>Verwenden</span> <b> <strong>transformieren: übersetzen(-50%, -50%)</strong> </b> <span>um das untergeordnete Element sowohl horizontal als auch vertikal zu zentrieren.</span></li></ul><p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>Dieses Beispiel zeigt, wie Sie mithilfe der Transformationseigenschaft von CSS Text innerhalb eines Div zentrieren.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Zentrieren Sie Text horizontal und vertikal innerhalb eines Div-Blocktitels><style>.container { Höhe: 300px; Breite: 645px; Position: relativ; Rand: 2 Pixel einfarbig schwarz; } h1 { Position: absolut; oben: 50 %; Farbe grün; links: 50 %; transform: Translate(-50%, -50%); } style> head> <body> <div> <h1>GeekforGeeksh1> div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/marker-interface-java">Warum Marker-Schnittstelle in Java?</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>Zusammenfassend hängt der gewählte Ansatz vom konkreten Anwendungsfall, der Kompatibilität mit anderen Elementen und der gewünschten Designästhetik ab. Mit diesen Methoden ist es möglich, einen zentrierten Textblock in verschiedenen Layouts und Designs zu erstellen.</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="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/robotics-tutorial/">Robotik-Tutorial</a> </li><li> <a href="/digital-electronics-logic-gate/">Digitale Elektronik – Logikgatter</a> </li><li> <a href="/ms-excel-tutorial/">Ms Excel-Tutorial</a> </li><li> <a href="/python-pil/">Python-Pille</a> </li><li> <a href="/java-abstract-class/">Java-Abstrakte Klasse Und Schnittstelle</a> </li><li> <a href="/java-networking/">Java-Netzwerk</a> </li><li> <a href="/accolite/">Akolyth</a> </li><li> <a href="/floyd-warshall/">Floyd-Warshall</a> </li><li> <a href="/c-dynamic-memory-allocation/">C-Dynamische Speicherzuweisung</a> </li><li> <a href="/golang/">Golang</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">Unterschied zwischen printf() und scanf() in C</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Unterschied zwischen printf() und scanf() in C mit Tutorial, C-Sprache mit Programmierbeispielen für Anfänger und Profis zu Konzepten, C-Zeigern, C-Strukturen, C-Union, C-Strings usw.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/difference-between-printf"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/float-vs-double-java">Float vs. Double Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/numeric-data-format">Numerisches Datenformat</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/methods-mockito">Methoden von Mockito</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/registers-8085-microprocessor">Register des 8085-Mikroprozessors</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-center-text-horizontally">Wie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks in CSS?</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">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/builder-design-pattern">Builder-Entwurfsmuster</a>
</li><li><a href="/html-tags">HTML-Tags</a>
</li><li><a href="/gamepigeon-android">Spieltaube Android</a>
</li><li><a href="/java-arrays">Array in Java-Methoden</a>
</li><li><a href="/typescript-foreach">Typoskript für jeden</a>
</li><li><a href="/how-create-dataframe-python">Pandas erstellen Datenrahmen</a>
</li><li><a href="/types-computer">Arten von Computern</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 Alle Rechte Vorbehalten | <a href="//ar.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</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>