Advanced Search

Return to Snippet

Revision: 25894
at April 15, 2010 06:47 by alexandrepayet
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<style type="text/css">
	 
	.vcenter span{
		line-height: 24px;
		
		/*
		grâce à cette astuce le span va se comporter comme une image, ainsi la propriété 'vertical-align' pourra agir sur lui
		*/
		display: inline-block; 	
		/*
		... on align le text verticalement au centre
		RMQ : pour un alignement en bottom il faudra modifier le line-height de l'element vcenter de manière à ce qu'il soit plus ou moins le double d'une line-height actuel
		*/
		vertical-align: middle; 
	}
	 
	.vcenter{
		margin: 0;
		line-height: 200px;
	}
	 
	.conteneur{
	height: 200px; //la configuration du conteneur avec une hauteur et overflow en hidden à son importance si on ne veut pas voir les elements qui suivent être poussé vers le bas
	overflow-y: hidden;
	
	width: 500px;
	border: 1px red solid;
	}
	 
	</style>
</head>
 
<body>
 
	<div class="conteneur">
		<p class="vcenter">
			<span>
				<img src="http://www.w3schools.com/images/h_logo.gif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
			</span>
			&nbsp;
		</p>
	</div>
 
</body>
</html>

Revision: 25893
at April 13, 2010 09:03 by alexandrepayet
Updated Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<style type="text/css">
	 
	.vcenter span{
		line-height: 24px;
		
		/*
		grâce à cette astuce le span va se comporter comme une image, ainsi la propriété 'vertical-align' pourra agir sur lui
		*/
		display: inline-block; 	
		/*
		... on align le text verticalement au centre
		RMQ : pour un alignement en bottom il faudra modifier le line-height de l'element vcenter de manière à ce qu'il soit plus ou moins le double d'une line-height actuel
		*/
		vertical-align: middle; 
	}
	 
	.vcenter{
		margin: 0;
		line-height: 200px;
	}
	 
	.conteneur{
	height: 200px; //la configuration du conteneur avec une hauteur et overflow en hidden à son importance si on ne veut pas voir les elements qui suivent être poussé vers le bas
	overflow-y: hidden;
	
	width: 500px;
	border: 1px red solid;
	}
	 
	</style>
</head>
 
<body>
 
	<div class="conteneur">
		<p class="vcenter">
			<span>
				<img src="http://www.w3schools.com/images/h_logo.gif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
			</span>
			&nbsp;
		</p>
	</div>
 
</body>
</html>

Revision: 25892
at April 13, 2010 08:49 by alexandrepayet
Initial Code 
<html>
<head>
<style type="text/css">

div span{
line-height: 24px;
display: inline-block;
vertical-align: middle; //ici on align le text verticalement au centre, pour un alignement en bottom il faudra modifier le line-height de l'element vcenter de manière à ce qu'il soit plus ou moins le double d'une line-height actuel
width: 450px;
}

.vcenter{
margin: 0;
line-height: 200px;
}

div.conteneur{
height: 200px; //la configuration du conteneur avec une hauteur et overflow en hidden à son importance si on ne veut pas voir les elements qui suivent être poussé vers le bas
overflow-y: hidden;
}

</style>
</head>

<body>

<div class="conteneur">
<p class="vcenter"><span><img src="http://www.w3schools.com/images/h_logo.gif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl </span>&nbsp;</p>
</div>

</body>
</html>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
HTML, CSS : Centrer verticalement un texte dans un div

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css, html, center

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
HTML