aligner le texte dans le milieu vertical

J'ai le code HTML/CSS suivant dans lequel une ligne de texte est affichée dans une boîte verte avec un contour vert foncé. Malheureusement, le texte est affiché plus près du haut de la boîte. Je voudrais que ce soit dans le milieu vertical. Qu'est-ce que je dois changer pour obtenir cet effet?aligner le texte dans le milieu vertical

Merci, PaulH

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title></title> 
    <style type="text/css"> 
    .foo 
    { 
     outline: 1px solid #98BF21; 

     color: #333333; 
     background-color: #EEFFCC; 

     height: 27px; 

     font-size: 15px; 
     font-family: "Lucida Console","courier new"; 

     vertical-align: middle; 

     margin: 1px 0px 0px; 
     padding: 0px 5px; 

     overflow: auto; 
     display: inline-block; 
    } 
</style> 
</head> 
<body> 
    <span class="foo">Lorem ipsum dolor sit amet, consectetur adipisicing elit</span> 
</body> 
</html>

Source

2011-03-03 PaulH

'hauteur de ligne: 27px'? – thirtydot

Voir here.

Dans votre cas, si votre texte ne comporte qu'une ligne, la méthode 2 fonctionne. Il suffit de remplacer height par line-height.

Source

2011-03-03 15:43:30 leonbloy

Bon lien; Je vous remercie. – PaulH

Cela fonctionne bien, jusqu'à ce que votre texte doit renvoyer – Blowsie

Oui, il est expliqué dans le lien (et dans ma réponse) que cette astuce ne fonctionne que pour une ligne. Dans le lien, il existe une autre méthode plus compliquée. – leonbloy

<div style="display:table-cell; vertical-align:middle;"> 
Stuff showing in the Vertical Middle of this Div 
</div>

Source

2011-03-03 15:35:33

aligner le texte dans le milieu vertical

Répondre

Questions connexes