28172 sujets

CSS et mise en forme, CSS3

Margin et alignement vertical

Bonjour à tous,

Voici la difficulté que je rencontre actuellement :

J'utilise 3 div : un père (id pere) qui contient 2 autres div (d'id respectif fils1 et fils2). Le div fils1 est positionné à gauche dans le père grâce à la propriété float. Le fils2 se place donc à la droite du fils1.

Je souhaiterais maintenant centrer verticalement le fils1 dans le div père, pour ce faire j'utilise la propriété margin-top sur le fils1 avec une valeur de 50%.

Malheureusement le résultat n'est pas celui que je souhaiterais, j'ai l'impression que le div fils1 a une marge de 50% plutôt par rapport à la page que par rapport à son conteneur direct (le pere).

Voici mon code pour éclairer mes propos :

<html>
	<head>
		<style type="text/css">	
			#pere
			{
				border : solid 3px;
				border-color : red;
				width : 60%;
			}
			
			#fils1
			{
				border : solid 2px;
				border-color : blue;
				float : left ;
				margin-top : 50%;
			}
			
			#fils1 p
			{
				margin : 0;
			}
			
			#fils2
			{
				border : solid 2px;
				border-color : green;
				margin-left : 5em;
			}
			
			#spacer
			{
				clear : both;
			}
		</style>
	<head>
	<body>
		<div id="pere">
			<div id="fils1">
				<p><strong>3 mois</strong></p>
				<p>juin-aout</p>
				<p>2007</p>
			</div>
			<div id="fils2">
				<p>
					Stage chez Acadis (Wiesbaden ? Allemagne) : développement d'une interface graphique 
					permettant de paramétrer les shaders au sein de l'application de visualisation temps réelle Tucan.
					L'interface a été développée avec la librairie QT et un prototype de viewer utilisant OpenGL et 
					GLSL a été élaborée pour tester l'interface.
				</p>
			</div>
			<div id="spacer"></div>
		</div>
	</body>
</html>


Merci d'avance pour vos suggestions.
Modifié par Mic (15 May 2010 - 22:35)
Bonjour,
le comportement des marged verticales en % étant assez imprévisible (50% équivaut environ à 100% de la hauteur de de la zone d'affichage), il est préférable de placer ton bloc avec la propriété top comme ceci:

            #pere 
            { 
 		position:relative;
border : solid 3px; 
border-color : red; 
width : 60%;
            } 
             
            #fils1 
            { 
                border : solid 2px; 
                border-color : blue; 
                top : 50%;
		position: absolute;
		margin-top: -30px;
            }


Cela suppose que le bloc fils1 ait une hauteur fixée à 60px.

Au passage attention aux marges latérale en em un peu risquées en cas de zoom texte. Smiley cligne
Modifié par Hermann (06 Sep 2009 - 22:52)
Sujet clos
Aller à