28173 sujets

CSS et mise en forme, CSS3

[resolu]Alignement vertical dans <div>

bonjour,

la question est sans doute récurrente, désolé !

je souhaite centrer verticalement un <object> dans un <div>.

voici mon css :
object{
	position:relative;
	height:38px;
	top:50%;
	margin-top:-19px;
	
}


le résultat est parfait avec IE, mais avec FX la marge négative n'est pas prise en compte et le contenu est donc décalé vers le bas.
Quelqu'un a une idée ?
merci Smiley smile
Modifié par bill_baroud (27 Apr 2006 - 15:16)
Modérateur
bonjour,

faire l'opposer peut-etre ?:

margin-top:50%;
position:relative;
top:-19px;

cela me semble plus logique pour le "top relatif"

++
Tiens, chez moi même la première configuration marche au poil (par contre la deuxième fout tout en l'air, donc je crois pas que ça soit recommandé…).
Tu es sûr que ton bloc parent a une hauteur fixe ?

Habile suggestion : voir ma signature.
Modifié par mpop (20 Apr 2006 - 23:34)
site (tu l'as déjà vu si je ne m'abuse Smiley cligne ) : http://da-bulb.com/hugues/index.html

le pb provient du flash "grands vins de bourgogne" sur FX. Il me semble pourtant que la méthode des marges négative est la bonne Smiley ohwell

css du conteneur :
#grandsVins{
	padding:0;
	margin:0;
	height:50px;
	background-color:#444444;
	border-top: 1px solid #FFFFFF;
}


contenu :
#gdv{
	position:relative;
	height:38px;
	top:50%;
	margin-top:-19px;	
}
Modérateur
?? mpop ?? , j'ai tester avant de proposé , et je peut t'assurer que mon bureau est rester propre Smiley langue .

tester en ligne avec http://xhtmlcsskits.xooit.net/base.html (malgré tout , j'oubli toujours qu'a la base le code est creer a partir d'un <html> et que j'oubli bien souvent de redeterminé un doctype ), donc sans doctype valable Smiley smile
cette bricole en js , traine depuis novembre, elle me suffit amplement dans sa version, vu que j'ai deja l'habitude de bricolé au bloc notes)

ceci dit, je n'ai pas voulu allez plus loin, car j'avais plutot envie de dire ,
part rapport a son idée de base .

si tu veut partir sur une position relative ...

alors peut-etre que la ce serait plus solide :


un conteneur dimensionné en position relative ;
un deuxieme conteneur contenu en position absolute avec un top:50%;
et le 3eme en position relative en top negatif avec un z-index a la clé pour assuré l'affichage dans IE ...

Mpop, je te laisse determiné le reste du css qui devrait t'etre logique d'appliquer avant de crier au bug.

dans tout les cas , un tableau avec une cellule est la seule solution , sure et qui est encore acceptable dans ce cas (Ce n'est forcement pas mon avis , encore que , de quel contenu s'agit-il , qu'elle place prend t-il dans la page et qu'elle est sa signification , etc ...).
il y a un moment ou faire mumuse avec le css de façon bancale et etre efficace sans perturber outre mesure l'ensemble d'une page html , il faut choisir , et le tableau refait son apparition Smiley langue .

Amicalement.
++

< re edit> pour mpop Smiley smile ce que j'ai ajouter a ce post se trouve apres le mot edit afin de te laisser la possibilité de voir sur qu'elle base html j'ai tester .

(le flash , quant a lui est insensible au z-index , c'est une surcouche au document web qui se superpose a la page il sera toujours visible Smiley smile )
</ re edit>
edit
test avec :

<div>
<p>a centrer</p>
<br />
<br />
<br />
<br />
<br />
<br />
</div>

et en css


p {
margin-top:50%;
position:relative;
top:-50px;/* valeur activer/desactiver pour test visuel */
}

oui, effectivement, ce n'est pas terible et ebcore moins du flash, Désolé
Modifié par gcyrillus (22 Apr 2006 - 12:04)
Vu la page. Tiens, ça a changé depuis la dernière fois.

Ah ben, tout a l'air de passer correctement, non ? Moi dans Firefox je le vois centré verticalement tout bien comme il faut.

Sinon, je me demandais, si on connais :
1 – la hauteur en pixels de l'élément conteneur ;
2 – la hauteur en pixels de l'unique élément de contenu…
Mais berdel de morde pourquoi on ne fait pas juste
#contenu {margin-top: [i](hauteur_conteneur - hauteur_contenu) ÷ 2[/i];}
?
Smiley eek
@ gcyrillus :
L'edit de ton message signifie que tu as constaté le même problème que moi, ou j'ai pas compris ?

Pour ma part j'avais fait un test de la solution qui était pas censée marcher, et ça marchait. Puis j'avais inversé le margin-top et le top, et le margin-top avec une valeur en pourcentage me donnait un résultat bizarre. Le référent de la valeur en pourcentage n'avait pas l'air d'être la hauteur du conteneur.
salut mpop,

J'avais pas vu ta réponse. J'ai fini par positionner mon truc manuellement, c'est pour ça que l'affichage était OK. N'empêche que j'ai pas réussi à centrer verticalement selon une méthode de puriste. Pas grave !
Sujet clos
Aller à