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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />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> <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>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><!--//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="/general-knowledge-questions/">Allgemeinwissensfragen</a> </li><li> <a href="/splunk-tutorial/">Splunk-Tutorial</a> </li><li> <a href="/java-scanner-class/">Java-Scanner-Klasse</a> </li><li> <a href="/physics-class-9-cat/">Physik-Klasse-9</a> </li><li> <a href="/cyber-security-tutorial/">Cyber-Sicherheits-Tutorial</a> </li><li> <a href="/json-tutorial/">Json-Tutorial</a> </li><li> <a href="/ai-news/">Ki-Nachrichten</a> </li><li> <a href="/cpp-data-types/">Cpp-Datentypen</a> </li><li> <a href="/java-awt-events/">Java Awt & Events</a> </li><li> <a href="/cpp-functions/">Cpp-Funktionen</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Physik-Fragen</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Physik-Fragen</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/physics-questions/"> <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="/graph-its-representations">Graph und seine Darstellungen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/113-pictionary-words-make-your-own-game-13168">113 Bildwörter, um Ihr eigenes Spiel zu erstellen</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-subtract-mixed-fractions-from-whole-numbers">Wie subtrahiere ich gemischte Brüche von ganzen Zahlen?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/static_cast-c">static_cast in C++</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cat-command-linux-unix-with-examples">Cat-Befehl unter Linux/Unix mit Beispielen</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="/how-download-youtube-video-vlc-media-player">YouTube-Video vlc speichern</a>
</li><li><a href="/heap-sort-algorithm">Heap und Heap-Sortierung</a>
</li><li><a href="/what-is-core-java">Kern-Java-Sprache</a>
</li><li><a href="/algebra-sets">Algebra der Mengen</a>
</li><li><a href="/types-software-testing">Softwaretests und -typen</a>
</li><li><a href="/data-mining-tutorial">Data-Mining</a>
</li><li><a href="/latex-partial-derivative">teilweise Differenzierung in Latex</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="//fi.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>
</body>
</html>