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="/ancient-history/">Histoire Ancienne</a> </li><li> <a href="/google-tricks/">Astuces Google</a> </li><li> <a href="/chemical-elements/">Éléments Chimiques</a> </li><li> <a href="/servlet-tutorial/">Tutoriel Sur Les Servlets</a> </li><li> <a href="/ejb-tutorial/">Tutoriel Ejb</a> </li><li> <a href="/directi/">Directeur</a> </li><li> <a href="/ansible-tutorial/">Tutoriel Ansible</a> </li><li> <a href="/static-keyword/">Mot-Clé Statique</a> </li><li> <a href="/windows-errors/">Erreurs Windows</a> </li><li> <a href="/difference/">Différence</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">Carte-Rpc</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Carte-Rpc</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/cpp-map/"> <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="/what-is-100-km-h-mph">Qu'est-ce que 100 km/h en mph ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-get-into-yale-131218">Comment entrer à Yale : 4 conseils d'experts en matière d'admission</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/psat-vs-sat-6-key-differences-you-must-know-1311302">PSAT vs SAT : 6 différences clés que vous devez connaître</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-50-funniest-fantasy-football-team-names">Top 50+ noms d’équipes de Fantasy Football les plus drôles</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/thread-concept-java">Concept de fil de discussion en Java</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="/javascript-example">exemple de javascript</a>
</li><li><a href="/vicky-kaushal">âge de Vicky Kaushal</a>
</li><li><a href="/two-dimensional-array-c">programme c pour tableau à deux dimensions</a>
</li><li><a href="/jasmine-davis">Jasmine Davis enfant</a>
</li><li><a href="/java-string">fonctions de chaîne en Java</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="//de.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>
<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>