Centrer le texte horizontalement et verticalement à l'intérieur d'un bloc div est important pour créer des mises en page visuellement attrayantes. Diverses méthodes, telles que les transformations flexbox, grille et CSS, offrent des solutions présentant des avantages et des inconvénients distincts. Cet article examine ces approches courantes pour réaliser le centrage du texte dans les blocs div.
Table des matières
- Utiliser Flexbox
- Utiliser la grille
- Utilisation de l'alignement du texte
- Utiliser une cellule de tableau
- Utilisation de la propriété Transform
Utilisation de Flexbox :
- Définissez le conteneur parent sur affichage : flexible ; Cela permet d'utiliser un boîte flexible et transforme le conteneur parent en conteneur flexible.
- Utiliser justifier-contenu : centre pour centrer l'élément enfant horizontalement dans le conteneur parent.
- Utiliser aligner les éléments : centre pour centrer l'élément enfant verticalement dans le conteneur parent.
Exemple: Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la propriété flexbox de CSS .
HTML Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div><style>corps { texte-align : centre ; } .container { hauteur : 300 px ; largeur : 645 px ; affichage : flexible ; justifier-contenu : centre ; align-items : centre ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/numpy-dot-python">point numpy</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>Utiliser la grille</span></h2><ul><li value='1'> <span>Grille CSS</span> <span>est un autre outil de mise en page populaire qui vous permet de créer des mises en page complexes et flexibles basées sur une grille.</span></li><li value='2'><span>Définissez le conteneur parent sur</span> <b> <strong>affichage : grille</strong> </b> <span>. Cela permet d'utiliser une grille CSS et transforme le conteneur parent en conteneur de grille.</span></li><li value='3'><span>Utilisez le</span> <b> <strong> </strong> </b> <b> <strong>éléments de lieu : centre</strong> </b> <span>propriété pour centrer l’élément enfant horizontalement et verticalement dans la cellule de la grille. Cette propriété est un raccourci pour les deux</span> <b> <strong>justifier les éléments</strong> </b> <span>et</span> <b> <strong>aligner les éléments</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la propriété grid de CSS.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/what-is-bash">Bourne encore une coquille</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div><style>.conteneur { hauteur : 300 px ; largeur : 645 px ; affichage : grille ; éléments de lieu : centre ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>Utilisation de l'alignement du texte :</strong> </b> </h2><ul><li value='1'><span>Le</span> <span>aligner le texte</span> <span>La propriété est un moyen simple et direct de centrer le texte horizontalement dans un bloc div.</span></li><li value='2'><span>Définissez le conteneur parent sur</span> <b> <strong>alignement du texte : centre.</strong> </b> <span>Cela centre l'élément enfant horizontalement dans le conteneur parent.</span></li><li value='3'><span>Utiliser</span> <b> <strong>hauteur de la ligne:</strong> </b> <span>pour centrer l'élément enfant verticalement dans le conteneur parent. La valeur de doit être égale à la hauteur du conteneur parent.</span></li></ul><p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div en utilisant l'alignement du texte de CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div><style>.conteneur { hauteur : 300 px ; largeur : 645 px ; alignement du texte : centre ; hauteur de ligne : 400 px ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</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>Utiliser une cellule de tableau</span></h2><ul><li value='1'><span>Définissez le conteneur parent sur</span> <b> <strong>affichage : tableau.</strong> </b> <span>Cela émule le comportement d’une table.</span></li><li value='2'><span>Définissez l'élément enfant sur</span> <b> <strong>affichage : tableau-cellule</strong> </b> <span>. Cela émule le comportement d’une cellule de tableau.</span></li><li value='3'><span>Utiliser</span> <b> <strong>alignement vertical : milieu</strong> </b> <span>pour centrer l'élément enfant verticalement dans le conteneur parent.</span></li><li value='4'><span>Utiliser</span> <b> <strong>alignement du texte : centre</strong> </b> <span>pour centrer l'élément enfant horizontalement dans le conteneur parent.</span></li></ul><p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Cet exemple montre comment centrer le texte à l'intérieur d'un div à l'aide de la cellule de tableau de texte CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div><style>.conteneur { hauteur : 300 px ; largeur : 645 px ; affichage : cellule de tableau ; alignement du texte : centre ; alignement vertical : milieu ; bordure : 2px noir uni ; } h1 { couleur : vert ; } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>Utilisation de la propriété Transform :</span></h2><ul><li value='1'><span>Définissez le conteneur parent sur</span> <b> <strong>position : relative.</strong> </b> <span>Cela permet d'utiliser un positionnement absolu pour l'élément enfant.</span></li><li value='2'><span>Définissez l'élément enfant sur</span> <b> <strong>position : absolue.</strong> </b> <span>Cela permet d'utiliser un positionnement absolu pour l'élément enfant.</span></li><li value='3'><span>Définir l'élément enfant</span> <b> <strong>haut</strong> </b> <span>et</span> <b> <strong>gauche</strong> </b> <span>propriétés à</span> <b> <strong>cinquante%</strong> </b> <span>. Cela positionne l'élément enfant au centre du conteneur parent.</span></li><li value='4'><span>Utiliser</span> <b> <strong>transformer : traduire (-50 %, -50 %)</strong> </b> <span>pour centrer l'élément enfant à la fois horizontalement et verticalement.</span></li></ul><p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>Cet exemple montre comment centrer le texte dans un div à l'aide de la propriété transform de CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>Centrer le texte horizontalement et verticalement à l'intérieur d'un titre de bloc div><style>.conteneur { hauteur : 300 px ; largeur : 645 px ; position : relative ; bordure : 2px noir uni ; } h1 { position : absolue ; haut : 50 % ; la couleur verte; gauche : 50 % ; transformer : traduire (-50 %, -50 %); } style> tête> <body> <div> <h1>GeekforGeeksh1> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/prolog-tutorial">qu'est-ce que le prologue</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>En résumé, l'approche choisie dépendra du cas d'utilisation spécifique, de la compatibilité avec d'autres éléments et de l'esthétique de conception souhaitée. Avec ces méthodes, il est possible d’obtenir un bloc de texte centré dans une variété de mises en page et de conceptions.</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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/mst/">Mst</a> </li><li> <a href="/interview-experiences/">Expériences d'entrevue</a> </li><li> <a href="/cpp-pointer/">Pointeur Cpp</a> </li><li> <a href="/geeks-premier-league-2023-cat/">Geeks Premier League 2023</a> </li><li> <a href="/python-math-library-functions/">Fonctions De La Bibliothèque Mathématique Python</a> </li><li> <a href="/nodejs-questions/">Questions Nodejs</a> </li><li> <a href="/digital-electronics/">Électronique Numérique</a> </li><li> <a href="/java-date-time/">Java-Date-Heure</a> </li><li> <a href="/combinatorial/">Combinatoire</a> </li><li> <a href="/python-library/">Bibliothèque Python</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Encodage et décodage Java Base64</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java Base64 Encode Decode exemples et sujets sur l'interface fonctionnelle, la classe anonyme, lambda pour la liste, lambda pour les méthodes comparables, par défaut, la référence de méthode, la date et l'heure Java, Java Nashorn, Java facultatif, le flux, le filtre, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-base64-encode-decode"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/access-environment-variable-values-python">Accéder aux valeurs des variables d'environnement en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/dana-white-net-worth-2024-ufc-ceo-s-salary">Dana White Net Worth 2024 (salaire, maison et voitures du PDG de l’UFC)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/standard-deviation-formula">Écart type – Formule, exemples et comment calculer</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/create-directory-python">Créer un répertoire en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-run-java-program-cmd-using-notepad">Comment exécuter un programme Java dans CMD à l'aide du Bloc-notes</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-int-char">int en char java</a>
</li><li><a href="/java-string">chaîne en java</a>
</li><li><a href="/java-convert-int-string">comment convertir un entier en chaîne java</a>
</li><li><a href="/123movie-alternatives">123film</a>
</li><li><a href="/how-read-csv-file-java">java lire csv</a>
</li><li><a href="/builder-design-pattern">modèle de conception de constructeur</a>
</li><li><a href="/what-is-star-topology">topologie en étoile</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 Tous Les Droits Sont Réservés | <a href="//bg.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>