28173 sujets

CSS et mise en forme, CSS3

[Résolu] Centré un élément absolu ?..

Bonsoir tous,

voilla j'essaye de centré un element de type block, qui a la proprieté "position" en "absolute"..en fait le block ou la div dont je vous parle aura comme parent le body... Possible ou pas de réalisé cela ?

Merci d'avance pour votre aide Smiley cligne
Modifié par ghijselinck (09 Nov 2006 - 23:03)
Salut.

Tu n'aurais pas un exemple en ligne ? (avant que je ne te suggère une solution peu recommandable si on peut l'éviter Smiley smile )
non, rien en ligne a l'instant..mais je vais vous l'expliquer si dessou Smiley cligne 

body {
 margin: 0;
 padding: 0;
 text-align: center;
}
#div {
 position: absolute; 
 top:  ?; /* Auccune idée vue que je vous pose la question  [langue] */ 
 left: ?; 
 width: 700px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
}
Modérateur
bonsoir ,
il reste aussi la solution d'user d'un parent en position:relative; lui même centré , qui peut-etre body (a eviter) , le conteneur principal de la page ou un div quelconque (qui peut aussi servir a simuler un hr avec sa bordure haute.
En centrant le parent et en donnant la même largeur au parent et contenu en absolu, celui ci suivra le centrage de l'element rester dans le flux .

test en exemple :
<!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>
<title>XHTML 1.0 Strict , test sur absolute centré</title>
<style type='text/css'>
html , body {
	margin:0;padding:0;
}
.centreur {
	width:80%;
	margin:auto;
}
#aboslu-o-centre-2 , #aboslu-o-centre {
	position:absolute;
	background:red;
	top:0;
	width:100%;
}
#aboslu-o-centre-2 {
	bottom:0;
	top:auto;
	background:yellow;
	width:80%;
	_width:100%;/* IE ne prend pas body en reference */
}
.relatif {
	position:relative;
}
</style>
</head>
<body>
<div class="centreur relatif" >
	<div id="aboslu-o-centre">
		<p>Test sur un  contenu en absolute , 
		mis en marge auto par le biais de son 
		conteneur en relatif.
		</p>
		<p>L'un et l'autre ont les même largeurs.
		(ici 100% , div.centreur.relatif  est la reference)
		</p>
	</div>
</div>

<div class="centreur" >
	<div id="aboslu-o-centre-2">
		<p>Test sur un  contenu en absolute , mis en marge auto par 
		le biais de son conteneur en static .
		</p>
		<p>L'un et l'autre ont les même largeurs.(ici 80% , 
		body serait la reference , pourtant IE prend le conteneur 
		en reference , il lui faut donc 100%)
		</p>
		<p>le conteneur en position:relative; est donc 
		une solution preferable et plus stable. 
		</p>
	</div>
</div>
</body>
</html>


sans donner de coordonnées , l'element en absolu va afficher son coin haut et gauche , a l'endroit ou il apparait dans le flux du html. (moyennant les marges eventuelles appliqué par defaut selon les navigateurs ou regles css presentes , ils risque neanmoins de ne pas se demarquer des elements flottants dans firefoxe par exemple ).

bonne soirée.
Sujet clos
Aller à