Pour centrer verticalement du texte avec CSS, combinez des propriétés spécifiques pour garantir un alignement parfait au sein de son conteneur. Cela permet de maintenir l’équilibre visuel et la lisibilité sur différentes tailles et résolutions d’écran.
Vous trouverez ci-dessous les approches pour centrer verticalement le texte avec CSS :
Table des matières
- Utilisation de l'affichage : table-cellule
- Utilisation de la hauteur de ligne et de l'alignement vertical
- Utiliser la méthode Flexbox
En utilisant display: table-cell>
Pour centrer verticalement du texte à l'aide de display: table-cell; alignement vertical : milieu ; sur l'élément conteneur, garantissant un alignement précis quelle que soit la taille du contenu ou les dimensions de l'écran. Le conteneur s'étend sur toute la hauteur (100vh) et la largeur (100vw) de la fenêtre d'affichage, avec une bordure en pointillés et un fond beige.
sommeil javascript
Exemple: L'exemple ci-dessous montre centrer verticalement le texte avec CSS en utilisantdisplay: table-cell>.
signification de la commission de sélection du personnelHTML
Alignement horizontal et verticaltitle><style>.conteneur { hauteur : 100vh ; largeur : 100vw ; affichage : cellule de tableau ; alignement vertical : milieu ; bordure : 2px en pointillés #4b2869 ; couleur de fond : beige ; } style> tête> <body> <div>Centrer verticalement le texte avec affichage : table-cell Property div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css.webp' alt="vtt"><p>Sortir</p> <h2 id='using-lineheight-and-verticalalign'> <b> <strong>En utilisant</strong> </b> <b><code class='hljs'> line-height></code></b> <b> <strong>et</strong> </b> <b><code class='hljs'> vertical-align></code></b> </h2><p dir='ltr'><span>Pour centrer verticalement</span> <b><code class='hljs'> the></code></b> <span>texte dans un élément div en utilisant line-height : 200px ; pour correspondre à sa hauteur, tout en vertical-align: middle; sur une travée imbriquée garantit un alignement précis quelle que soit la taille de la police. Le texte-align: center; La propriété centre horizontalement le texte et une bordure en pointillés offre une distinction visuelle.</span> <b> <strong>Exemple:</strong> </b> <span>L'exemple montre Centrer verticalement le texte avec CSS en utilisant</span><code class='hljs'>line-height></code><span>et</span><code class='hljs'>vertical-align.></code></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Titre de l'alignement horizontal et vertical><style>div {hauteur : 200 px ; hauteur de ligne : 200 px ; alignement du texte : centre ; bordure : 2px en pointillés #f69c55 ; } span { display: inline-block; alignement vertical : milieu ; hauteur de ligne : normale ; } style> tête> <body> <div> <span>techcodeview.comspan> div> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-2.webp' alt="Centrer verticalement en utilisant la hauteur de ligne et l'alignement vertical"><h2 id='using-flexbox-method'><span>Utiliser la méthode Flexbox</span></h2><p dir='ltr'><span>Pour aligner verticalement</span><code class='hljs'>a></code> <b><code class='hljs'>></code></b> <span>texte en utilisant la méthode Flexbox en définissant display: flex; aligner les éléments : centre ; sur l'élément de corps, assurant un centrage parfait quelle que soit la taille de l'écran. Le texte est stylisé avec une taille de police : de 20 px ; poids de la police : gras ; pour plus de lisibilité.</span></p> <p dir='ltr'> <b> <strong>Exemple:</strong> </b> <span>L'exemple ci-dessous montre centrer verticalement le texte avec CSS.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Texte central vertical - Méthode Flexboxtitle><style>corps { affichage : flex ; aligner les éléments : centre ; hauteur : 100vh ; marge : 0 ; couleur d'arrière-plan : RVB (181, 226, 211) ; } .text { taille de police : 20 px ; poids de la police : gras ; } style> tête> <body> <div>Alignement vertical du texte à l'aide de la méthode Flexbox div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/set-java">défini en Java</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/45/how-vertically-center-text-with-css-3.webp' alt="alignement vertical-flex"><p>Sortir</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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-loop-programs/">Programmes En Boucle Python</a> </li><li> <a href="/english-difference-between/">Anglais-Différence-Entre</a> </li><li> <a href="/python-time-module/">Module Temporel Python</a> </li><li> <a href="/physics-class-12-cat/">Physique-Classe-12</a> </li><li> <a href="/github/">Github</a> </li><li> <a href="/microprocessor/">Microprocesseur</a> </li><li> <a href="/sql-server/">Serveur Sql</a> </li><li> <a href="/sql/">SQL</a> </li><li> <a href="/microprocessor-tutorial/">Tutoriel Sur Le Microprocesseur</a> </li><li> <a href="/automata-tutorial/">Tutoriel Automatique</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">Tas maximum en Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/max-heap-java"> <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="/how-set-space-between-flexbox">Comment définir l'espace entre la Flexbox ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/surface-area-prism">Surface d'un prisme</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/vili-fualaau-s-children-all-about-audrey">Les enfants de Vili Fualaau (Tout sur Audrey, Georgia et Sophia)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/local-maxima-minima-calculus">Maxima et minima locaux dans le calcul</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/3-way-merge-sort-c">Tri par fusion à 3 voies en c</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-string-char">convertir une chaîne en caractère</a>
</li><li><a href="/read-eval-print-loop-java">remplacer en java</a>
</li><li><a href="/java-jlist">boîte de liste Java</a>
</li><li><a href="/get-current-date-time-java">date actuelle en java</a>
</li><li><a href="/java-string-isempty">Java vide</a>
</li><li><a href="/multiplexer">Multiplexeur 8 à 1</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="//iw.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>