CSS: centrer,aligner du texte ou une image verticalement

voici comment aligner une image ou du texte verticalement sur vos pages web:

centrer une image verticalement en css

<p>      
<img src="css_centre_image_verticale.jpg" alt=""/>  
</p> 

et voici le css pour centrer cette image, on va utiliser la propriété css line-height sur le conteneur et vertical-align sur l’image:

p  {   
height:200px;  
line-height:200px;  
text-align:center; 
}   
 
img {   vertical-align:middle; } 

aligner du texte verticalement en css

même principe:

<p> 
<span>Blabla blabalalalablabla<br />blablabla </span> 
</p> 

avec le style CSS suivant:

p {  
height:200px;  
line-height:200px;  
text-align:center;  
}    

span {   
width:100px;   
border:1px solid #fff;  
vertical-align:middle;  
display:inline-block;  
line-height:1.2;   
text-align:left;  
}

Publicités