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> line-height></code></b> <b> <strong>et</strong> </b> <b><code> vertical-align></code></b> </h2><p dir='ltr'><span>Pour centrer verticalement</span> <b><code> 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>line-height></code><span>et</span><code>vertical-align.></code></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code> <pre> <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>a></code> <b><code>></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> <pre> <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><!--//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="/net-framework/">Cadre .Net</a> </li><li> <a href="/dbms-relational-model/">Modèle Relationnel De Sgbd</a> </li><li> <a href="/ai-ml-ds-with-r/">Ai-Ml-Ds Avec R</a> </li><li> <a href="/interview-experiences/">Expériences d'entrevue</a> </li><li> <a href="/java-enum-class/">Classe D'énumération Java</a> </li><li> <a href="/http-headers/">En-Têtes Http</a> </li><li> <a href="/java-calendar-class/">Classe De Calendrier Java</a> </li><li> <a href="/dynamic-programming/">Programmation dynamique</a> </li><li> <a href="/android-tutorial/">Tutoriel Android</a> </li><li> <a href="/web-scraping/">Scraping Web</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Comment convertir une liste en ensemble ?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Comment convertir une liste en ensemble avec python, tutoriel, tkinter, bouton, aperçu, entrée, bouton à cocher, canevas, cadre, configuration de l'environnement, premier programme python, opérateurs, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-convert-list-set"> <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-sort-pandas-dataframe">Comment trier le DataFrame Pandas ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/http-response-status-codes/">Codes D'état De Réponse Http</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/birds-name-english-hindi-list-100-name-birds">Nom des oiseaux en anglais/hindi – Liste de 100 + nom des oiseaux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sanjay-dutt">Sanjay Dutt</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-string-upper-function">Fonction Python String supérieure()</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="/difference-between-centos">rhel contre centos</a>
</li><li><a href="/git-checkout">paiement dans git</a>
</li><li><a href="/madhuri-dixit">Madhuri a dit</a>
</li><li><a href="/how-track-iphone-from-an-android-phone">trouver mon iphone depuis Android</a>
</li><li><a href="/exception-handling-java">gestion des exceptions java</a>
</li><li><a href="/node-js-command-line-options">commande dans le nœud js</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="//fi.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>
</body>
</html>